element-plus版本:v2.2.0

vue版本:v3.0.0

  <el-input v-model="dataInput" class="input-border-style" placeholder="请输入信息">
  </el-input>

关于el-input的CSS样式:

  • .input-border-style 自定义的样式类
  • .el-input.is-disabled .el-input__inner element-plus的样式类
  • .el-input.is-disabled element-plus的样式类
  • .el-input__inner element-plus的样式类
/** 默认样式 */
.input-border-style{
  border:1px solid #47c9FF;
  border-radius:3px;
  padding-left: 10px;
}
/** el-input disabled时的文字颜色*/
.el-input.is-disabled .el-input__inner{
  color:#d61616;
}
/** el-input disabled时的背景和边框*/
.el-input.is-disabled{
  background:#dbdada;
  border: 1px solid #868686;
}
/** el-input 正常模式下、readonly模式下的文字颜色 */
.el-input__inner{
  color:#00ccff;
}

正常的样式:

在这里插入图片描述

disabled 无内容:

在这里插入图片描述

disabled 有内容:

在这里插入图片描述

使用到的颜色:

在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐