input 获取焦点后样式的修改

一、实现目标
1.没有获取焦点时样子

2.获取焦点时

代码：

<input  class="input"placeholder="请输入关键字" @input="loadNode"
/>

css

.input {border-radius: 14px;border:1px solid #e4e4e4;margin: 5px;margin-top: 10px;width: 95%;height: 28px;font-size: 12px;font-weight: normal;color: #333333;font-family: '微软雅黑';}
/* 修改input占位符样式 */
.input::placeholder {padding-left: 5px;box-sizing: border-box;color: #CCCCCC;
}
/* WebKit, Blink, Edge浏览器，带input，双冒号 */
.input::-webkit-input-placeholder{ padding-left: 5px;box-sizing: border-box;color: #CCCCCC;
}
/* 火狐浏览器高版本（19+），不用带input，双冒号 */
.input::-moz-placeholder{ padding-left: 5px;box-sizing: border-box;color: #CCCCCC;
}
/* 火狐浏览器底版本（4 to 18），不用带input，单冒号 */
.input:-moz-placeholder{ padding-left: 5px;box-sizing: border-box;color: #CCCCCC;
}
/* IE浏览器底版本（10-11），带input，单冒号 */
.input:-ms-input-placeholder{  padding-left: 5px;box-sizing: border-box;color: #CCCCCC;
}
/* 修改input获取焦点后的样式 */
.input:focus{box-shadow: 0px 0px 5px 0px rgba(64, 159, 255,0.25);border:none;outline:1px solid #409EFF
}
/* 修改input获取焦点后占位符消失 */
.input:focus::-webkit-input-placeholder{color:transparent;
}