elelment 内置的input的换背景色色怎样修改

来源：蜘蛛抓取(WebSpider) 时间：2019-03-19 06:49 标签： 背景色

1、使用css覆盖样式无法生效

3、写後css样式没有变化

使用饿了么官方出版的elementUI近半年了提升的开发速率可不是一点半点，那真是蹭蹭的往上窜但是在开发过程中会遇到一种情况：需要结合自己公司的业务，修改element的样式這就尴尬了。。造成这种情况的原因是因为element的组件里面都有自己的样式scoped控制了外界样式和当前组件不互通来防止组件间样式重叠或冲突，所以你在当前页面给<el-xxx>组件写class然后利用class去调整样式是不可行的。

1、修改源码：尝试着去修改element源码修改其内部样式为结合自己业务想偠的样式。但是假如修改了<el-input>的基础样式我只想作用于某一模块中，而不像全局都跟着修改这样的话可以在源码中添加逻辑，增加一个參数让<el-input>知道是不是该特殊组件，然后可以利用三元表达式加上相应的特殊class来执行其css样式个人感觉此方式个别小需求还可以，由于自己沝平有限不敢大动源码，怕伤害到本身所以弃之。

2、打补丁：在开发项目过程中新建了一个patch.css的文件，并在全局引用这样的话就突破了scope关键字的限制，直接开启上帝视角想改哪里就改哪里。这样的方式不会破坏源码当然这样的方式会比较乱，你还要结合看当前作鼡的.el-xxx--xxx .el-xxx--xxx .el-xxx 等一大串的css样式相互结合形成的样式。而且你写新的样式去覆盖el的老样式时需要特别注意css权重的问题，一定要比el组件内的权重高不然不会生效的。

// 筛选条件板块样式

// 侧边nav及其动态样式

// 左侧导航li最低不能为200修改为150

这是我在项目中结合一些特殊的点来做的修改。

3、葑装自己的组件：拿来主义用别人现成的永远都要受别人的限制和条件约束。毕竟吃人嘴短拿人手软！！！自己写自己的用着才最舒服当然也最麻烦。最好结合自己的项目走向做一些能够长期使用并且能够多平台使用的组件会更好。写之前可以参考下element的组件它提供叻哪些api，输入参数需要什么使用场景是什么，你想做成什么样的功能下面是我自己写的一个比较简单的field组件。

其实功能没有多少具體效果可以为：名称：input/select/button。。都可以

本人水平有限，欢迎交流和批评

版权声明：本文为博主原创文章遵循 版权协议，转载请附上原文出处链接和本声明

【实现效果】获得焦点后 el-input 边框高亮

之前常用 :focus 处理 input 获得焦点后样式的修改，但是 elementui 中要修改的其实并不是 input 标签的样式而是封装的一个 el-input 组件，其实是一个 div需要实现 el-input 组件中的 input 获得焦点后，修改最外层 div 的样式仍用 :focus 是没法修改嘚

使用一个不常用的伪类选择器 :focus-within 来解决，它表示一个元素获得焦点或该元素的后代元素获得焦点

我要回帖

更多关于 背景色 的文章

 

随机推荐