input获取焦点时改变边框颜色

用原始input标签做一个与el-input一样效果的输入框

<input type="text" v-model="value" class="inputValue" />

css代码：

.inputValue {
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    width: 50%;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
}
.inputValue:focus {
    // 这条语句必须有，不然border效果不生效
    outline: none;
    border: 1px solid #409eff;
}

• outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

• outline:none;表示使outline属性无效。

• outline属性包括：outline-color、outline-style、outline-width。

• 注释：请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

• 注释：轮廓线不会占据空间，也不一定是矩形。

• 浏览器支持:所有主流浏览器都支持 outline-style 属性。

• 只有在规定了 !DOCTYPE 时，Internet Explorer 才支持 outline-style 属性。