项目场景:
提示:这里简述项目相关背景:
有时候需要改写element原来输入框/选择框的颜色

问题描述
提示:这里描述项目中遇到的问题:
输入框的话需要hover时边框颜色修改,选择值的时候边框颜色修改以及选中后边框颜色修改。
输入框的话只有hover时边框颜色修改,获得光标时候边框颜色修改
解决方案:
提示:这里填写该问题的具体解决方案:
1:选择框:
css
// 输入框 、 选择框 平时的状态颜色
/deep/.el-input__inner {
height: 50px;
box-shadow:0 0 1px 1px #eeeeee;
border-radius: 3px;
border: 1px solid #cccccc;
}
// 选择框 选择时的颜色(获得光标时的颜色)
/deep/.el-select .el-input.is-focus .el-input__inner {
// box-shadow: 0 0 0 0.7px #00AC1F inset !important;
box-shadow: 0 0 0 1px #00AC1F inset !important;
}
// 选择框 选中后 的颜色 (选中值后失去光标)
/deep/.el-select .el-input__inner:focus {
// box-shadow: 0 0 0 0.7px #00AC1F inset !important;
box-shadow: 0 0 0 1px #00AC1F inset !important;
}
// 选择框 hover时 的颜色
/deep/.el-select:hover:not(.el-select--disabled) .el-input__inner {
// box-shadow: 0 0 0 0.7px #00AC1F inset;
box-shadow: 0 0 0 1px #00AC1F inset !important;
}
2:输入框
css
// 输入框正常状态时边框
/deep/.el-input__inner{
height: 50px;
box-shadow: 0 0 0 0 #ffffff;
border-radius:3px 0 0 3px ;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
// 右边不加border因为右边用icon图标box的border
}
// 输入框hover时边框颜色
/deep/ .el-input__inner:hover{
border-color: #00AC1F !important;
}
// 输入框 获得光标 是边框颜色
/deep/.el-input__inner:focus{
border-color: #00AC1F ;
box-shadow: 0 0 0 0 #00AC1F;
}