需求:将el-input的样式修改为下图所示
代码:(注意elementplus的边框使用的是box-shadow,之前一直使用border一直不生效,找了半天才发现,可恶!!)
// html:
<el-input
class="form_input"
v-model="form.freq"
placeholder="输入频率(单位:MHz)" />
// css
:deep(.el-input__wrapper) {
box-shadow: 0 0 0 1px #60bbff inset;
}
// placeholder文字的颜色
:deep(.el-input) {
--el-input-placeholder-color: #60bbff;
}
:deep(.el-icon svg) {
color: #60bbff;
}
以下为额外的css,不需要可忽略
// select的
:deep(.el-select__wrapper) {
box-shadow: 0 0 0 1px #60bbff inset;
}
:deep(.el-select__caret) {
color: #60bbff;
}
:deep(.el-select__placeholder.is-transparent) {
color: #60bbff;
}
// cascader的
:deep(.el-cascader .el-input .el-input__suffix-inner .el-icon svg) {
color: #60bbff;
}
// textarea
:deep(.el-textarea__inner) {
box-shadow: 0 0 0 1px #60bbff inset;
}