当前位置: 首页 > news >正文

修改el-select或者el-input样式失效

下午改el-input和el-select这两个的样式真的烦,,,还不如写原生标签了。。

样式使用的是sass

我已经在样式器中挨着挨着去找了,把层级的类都写下来了

.select-wraper{//下拉框.el-select{.el-input .el-input__wrapper{background-color: red;}}}

可是一直不生效,最初看到说 popper-append-to-body="false"设置为false,没用。。。

后面感觉就是样式穿透的问题,
注意用在css中穿透是:/v-deep/ 选择器 ,还有看到less貌似是: :v-deep(选择器)也不是,在scss中使用::v-deep(选择器),注意没有空格,然后按照所寻找的样式选择器放进来就可以了。

而且注意不是background-color: none;

::v-deep(.el-input .el-input__wrapper){background-color: none;}

因为在页面的时候我取消样勾选就满意黑色,所以以为设置的是none,结果代码里面设置none是白色,然后一直以为没有生效,当改成自己想要的颜色就可以了

.select-wraper{//下拉框.el-select{::v-deep(.el-input .el-input__wrapper){background-color: red;}}}

结果如下:

在这里插入图片描述

下拉框的样式

虽然输入的颜色自定义了,但是上述的下拉框还是白色的
可以尝试的方案:

1.popper-append-to-body=’false’,但发现还是会去body,
2.样式写style不加scoped还是无效
https://www.cnblogs.com/clownblogs/p/17280284.html

3.自定义类实现新的样式
https://juejin.cn/post/7039883315922354207
但是这个我加了也没有找到类目,添加失败

主要就是.el-popper.is-light类 和.el-select__popper.el-popper类的 background设置无效
最后直接使用关键字effect='dark' 先用着。。。

http://www.lryc.cn/news/107176.html

相关文章:

  • 【Apifox】Apifox设置参数说明:
  • 离线数仓中,为什么用两个flume,一个kafka
  • p7付费课程笔记6:CMS GC
  • Linux性能分析--cpuinfo的内核实现
  • 鲁大师7月新机性能/流畅/久用榜:骁龙8 Gen2领先版亮相,性能跑分再破新高
  • 【QT学习】01:helloqt
  • 学习gRPC (三)
  • 【html】学习记录
  • 2023年人工智能技术与智慧城市发展白皮书
  • 《Python入门到精通》条件控制 if 语句
  • 如何编写一个易于维护的考试系统源码
  • day 2 |977.有序数组的平方、209.长度最小的子数组、59.螺旋矩阵II
  • 【力扣每日一题】2023.8.2 翻转卡片游戏
  • IDEA设置中文 中文插件
  • Python——调用webdriver.Chrome() 报错
  • 人工智能发展的五个主要技术方向是什么?
  • 机器学习知识经验分享之六:决策树
  • 回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测
  • 309. 买卖股票的最佳时机含冷冻期
  • P1119 灾后重建
  • USB采集卡如何打pts
  • 机器学习实战13-超导体材料的临界温度预测与分析(决策树回归,梯度提升回归,随机森林回归和Bagging回归)
  • 小研究 - 一种复杂微服务系统异常行为分析与定位算法(二)
  • Docker 安装 MySQL5.6
  • vue组件跳层级时的事件处理 (事件的广播与派发)
  • 毫米波雷达 TI IWR6843 官方测试程序(Out Of Box Demo)
  • 中大标了 5813万
  • Java电子招投标采购系统源码-适合于招标代理、政府采购、企业采购、等业务的企业 tbms
  • RocketMQ安装和简单使用
  • Codeforces Round 869 (Div. 2)