Element中el-select修改下拉面板颜色,局部组件修改不影响全局

1、默认el-select渲染后的Css样式如下:

该组件直接挂在到#app节点上,导致我们不能在某个组件内修改下拉框的样式等需求;选中 el-select 的选项时页面的结构时,选项的容器并不在挂载的 div#app 上,所以设置的样式就无法正常作用到选项内容的 div 上;

2、el-select组件中设置参数:popper-append-to-body="false"

 这样el-select组件就不会直接挂在到#app上,这样就可以在某个组件中修改el-select的样式了

修改后,页面渲染后的效果如下:

 

 

element-plus,要修改下拉选项组件Select)的边框颜色,可以通过覆盖组件的内部CSS样式来实现。通常情况下,你可以通过定义全局样式或者局部样式来完成这个操作。下面提供一个基本的方法来修改边框颜色: 1. 全局样式修改: 你可以通过定义全局CSS来改变下拉选择框的边框颜色。首先,在你的项目创建或修改一个全局样式文件,比如`app.css`或`app.less`,然后添加以下样式规则: ```css /* CSS */ .el-select .el-input .el-input-group__append, .el-select .el-input .el-input-group__prepend { color: #你的边框颜色; } .el-select .el-input-group__append { border-left-color: #你的边框颜色; } .el-select .el-input-group__prepend { border-right-color: #你的边框颜色; } ``` 或者使用Less/Sass等预处理器: ```less /* Less */ .el-select .el-input .el-input-group__append, .el-select .el-input .el-input-group__prepend { color: @your-border-color; } .el-select .el-input-group__append { border-left-color: @your-border-color; } .el-select .el-input-group__prepend { border-right-color: @your-border-color; } ``` 将`@your-border-color`变量替换为你想要的颜色值。 2. 局部样式修改: 如果你只想在特定组件修改样式,可以使用Vue的`<style scoped>`来避免样式冲突: ```html <style scoped> /* 用具体的类名或ID来定位你的下拉组件 */ .el-select .el-input .el-input-group__append, .el-select .el-input .el-input-group__prepend { color: #你的边框颜色; } .el-select .el-input-group__append { border-left-color: #你的边框颜色; } .el-select .el-input-group__prepend { border-right-color: #你的边框颜色; } </style> ``` 请确保你的样式文件在Vue组件加载后能够被正确解析和加载。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ponGISer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值