美文网首页
Vue elementUI select下拉框禁用时修改plac

Vue elementUI select下拉框禁用时修改plac

作者: 前端小猪仔 | 来源:发表于2020-12-26 16:44 被阅读0次

最近做项目碰到UI设计需求select下拉框禁用时placeholder字体颜色需要是黑色，由于楼主所使用的UI框架是elementUI，看了下官方文档和设计需求不符，从图中可以看出elementUI自带的字体颜色是偏灰色的

于是我就想到自己强行去修改他的字体样式，查阅网上资料发现可以使用样式穿透 ::v-deep ，由于style用的scoped属性，所以必须样式穿透才能改成功，如果你的没有设置scoped属性可以直接修改不需要使用样式穿透，给select添加一个class名

然后利用样式穿透修改placeholder字体样式

//修改禁用下拉框placeholder文字样式

.select-software{

  &::v-deep .is-disabled{

    & ::placeholder {

      color: #000000;

    }

  }

}

最后效果如下图

相关文章

  • Vue elementUI select下拉框禁用时修改plac

    最近做项目碰到UI设计需求select下拉框禁用时placeholder字体颜色需要是黑色，由于楼主所使用的UI框...

  • 记录element select组件小功能开发

    1. 在基于vue+elementUI项目开发中，遇到了一个小的需求（select下拉框）。在后台返回的数据中，只...

  • laypage - 自定义模拟 limits中的select标签

    前言： layui分页模块 laypage limits下拉框为select标签，导致下拉框样式不能修改且在不同浏...

  • vue 基于elementUI的选择组件el-select中@c

    vue 基于elementUI的选择组件el-select中@change事件返回对象方法[https://blo...

  • Vue ant-design select滚动条跳动

    Vue ant-design下拉框select如果有null值，会出现跳动 将null值过滤掉即可

  • selenium之定位下拉框（Select）

    1. 定位