Vue elementUI select下拉框禁用时修改placeholder字体颜色

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

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

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

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

.select-software{

  &::v-deep .is-disabled{

    & ::placeholder {

      color: #000000;

    }

  }

}

最后效果如下图

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容