修改element-ui里的input输入框里的字体颜色和背景透明

标题修改之前的样式修改以后的样式：字体变色，背景透明可以发现在element-ui中把样式都默认了，自己修改的css样式不起作用代码如下：<el-input prefix-icon="el-icon-s-custom" placeholder="请输入账号"></el-input><el-input prefix-icon="el-icon-lock" placeho

Simplicity438

27615人浏览 · 2021-08-20 13:52:43

Simplicity438 · 2021-08-20 13:52:43 发布

标题修改之前的样式

修改以后的样式：字体变色，背景透明
在这里插入图片描述
可以发现在element-ui中把样式都默认了，自己修改的css样式不起作用

代码如下：

<el-input prefix-icon="el-icon-s-custom" placeholder="请输入账号"></el-input>
<el-input prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>

使用深度选择器

<style lang="less" scoped>
// 改变input里的字体颜色
/deep/input::-webkit-input-placeholder {
  color: #17a1e5;
  font-size: 15px;
}

// 改变input框背景颜色
/deep/.el-input__inner {
  background-color: transparent !important;
  border: 1px solid #1296db;
}
</style>