Element UI select 下拉框样式覆盖

最新推荐文章于 2024-08-17 12:36:44 发布
最新推荐文章于 2024-08-17 12:36:44 发布
阅读量2.7k 收藏 3
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_42804766/article/details/104988579
版权

因为我需要写一个大屏页面，然后需要用到select框，我想把select下拉选项的背景颜色改成透明，然后我想覆盖掉它本身的样式。我本来想改变el-select-dropdown的样式，即使使用了 /deep/ 和样后面加 !important，并没有卵用，还发现select下拉框实在最外层的，如下图：

然后我就找了另外一种方法，创建一个新的类，如下图：

然后对这个样式类进行样式修改

如下图：

然后这样就可以了！

果迷_suger
关注
Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式，解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式
王佳斌
03-23 3365
vue3，element-plus，el-select，下拉选择器，下拉选择框，Select选择器，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementPlus选择器如何覆盖hover效果，使用deep改不了样式，修改边框颜色，select去掉边框，vue3+elementPlus中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，
Vue - ElementUI 下拉选择器 el-select 覆盖修改 placeholder样式，详细解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式）
王佳斌
03-23 3170
vue，vue2，element-ui，el-select，下拉选择器，下拉选择框，Select选择器，修改边框颜色，select去掉边框，vue2+element中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，select弹出样式修改，修改下拉框el-select的样式，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementUI
elementUI --- el-select 下拉框样式覆盖
热门推荐
爱菇凉的博客
07-02 3万+
前因： element UI 组件库中的 select 选择器 中下拉列表的样式，在页面渲染的时候，总是渲染为仅次于body级别的div ，这样子覆盖样子会影响全局其他的select选择器下拉框样式，试图通过给el-select加父标签来覆盖，然而并没有卵用。 控制台看到的渲染结果： 解决方法： 通过 propper-class 来自定义一个类，这样子在控制台可以看到，自定义的类渲染到页面上的效...
动态修改el-select 选中的值字体颜色 和下拉框字体颜色
wanyu729的博客
07-30 943
在.el-select 使用div 包裹 动态添加类名 根据scope.row.taskLevel 值添加不同的类名。在el-option 里边添加:style="{ color: priorityColor(item.value) }"return 'orange';// 紧急 - 红色。虽然办法笨 但可行。
Element中el-select修改下拉面板颜色，局部组件修改不影响全局
pon的博客
12-19 2486
Element中el-select修改下拉面板颜色，局部组件修改不影响全局
2020-10-14 element-ui el-select 自定义样式覆盖
qq_37049251的博客
10-14 852
element-ui el-select 自定义样式覆盖 设计图样式 中间分割线使用css::after背景图进行，最后一个设置为display:none 最终效果 备份一下方便使用 $focus_color: #3296E1; .statictis-select{ /deep/.el-input__inner{ background-color: #112E49; color: #ffffff } .el-input__inner{ border-color
解决element ui select下拉框不回显数据问题的解决
10-17
解决Element UI的`el-select`下拉框不回显数据的问题，关键在于检查数据类型、数据结构以及数据加载的时机。通过调试和比对，找出问题的根源，针对性地进行修复。在实际开发中，保持良好的编程习惯，如正确处理数据...
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
浅谈Vue Element中Select下拉框选取值的问题
08-27
在上面的代码中，我们使用 Element UI 的 `el-select` 组件来创建一个下拉框，并使用 `el-option` 组件来生成选项。 五、解决实际问题 在实际开发中，我们经常会遇到一些实际问题，例如如何获取选中后的值、如何...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
elementplus 中 select 选择器下拉框样式无法修改问题
jiangjunyuan168的博客
01-24 1771
遇到需要修改 elementplus 中下拉框 el-select 样式的需求，但是发现在添加了 scoped 属性的 style 标签，并且使用了 deep 样式穿透的情况下并不能修改其样式。
Element plus部分组件样式覆盖记录
最新发布
qq_45897239的博客
08-17 791
一、el-button 样式 二、Popconfirm 气泡确认框 三、Popover 气泡卡片 四、Checkbox 多选框 五、Pagination 分页 六、Form 表单 七、Table 表格
覆盖elementui样式的几种办法
庭落
11-19 3523
用 /deep/ 标签 例如 /deep/ .class{ 要覆盖的样式 } 在这个写scope的style标签下面再写一个style标签，专门写要覆盖的样式就好了 在index.html中引入一个外部样式，进行覆盖 一般情况下第一种就可以了，不行的话试试后面的两个 ...
ElementUI，修改el-select下拉框的样式
anqiaoyun的博客
12-18 1594
ElementUI，修改el-select下拉框的样式
css下拉展示,jQuery/CSS3大屏下拉菜单DEMO演示
weixin_42513512的博客
08-03 253
This is an example of a large container with 5 columnsThis is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.Phasellus vitae sapien ac l...
全屏按钮实现，某个块元素全屏展示，全屏按钮图标监听，监听全屏事件，全屏dom里面el-select选项不显示解决
ProgramarQin的博客
11-03 2535
前言：有些时候遇到bug与其把事情想得复杂，还不如回去看看官方文档。 做系统难免会遇到要做到全屏查看的需求，以下即为全屏代码的实现。 <template> <div> <div>测试全屏测试全屏测试全屏测试全屏测试全屏测试全屏测试全屏</div><button type="button" @click="btnFull">全屏...
大屏下拉框错位
weixin_53898445的博客
07-28 171
大屏下拉框错位j解决方法
vue中使用requestFullscreen放大元素时el-dropdown被覆盖的问题
minx_6688的博客
08-03 1080
因为el-dropdown的弹出层是和body一个层级 解决： 直接放大 document 这个元素 使用el-select 代替，并设置el-select 的 popper-append-to-body属性为 false
element ui select组件 下拉框样式如何更改
03-29
可以通过以下方法更改 Element UI Select 组件下拉框的样式： 1. 使用 CSS 样式覆盖 Element UI 的默认样式 通过给 Select 组件添加自定义的 CSS 样式来改变其下拉框的样式，例如： ```css .el-select-dropdown { background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; } ``` 2. 使用 Element UI 的自定义主题 通过在项目中引入 Element UI 的主题文件，可以全局改变组件的样式，包括 Select 组件的下拉框样式。具体操作如下： 首先，安装 `element-theme` 工具： ```bash npm install element-theme -g ``` 然后，在项目中创建一个 `theme` 目录，并在其中创建一个 `element-variables.scss` 文件，用于设置 Element UI 的主题变量。例如： ```scss $--color-primary: #409EFF; $--border-radius-base: 4px; $--select-menu-bg: #f5f5f5; $--select-menu-border-color: #ccc; ``` 接着，在命令行中执行以下命令生成主题文件： ```bash et -i theme/element-variables.scss -o theme ``` 最后，在入口文件中引入主题文件： ```javascript import 'element-theme-default'; ``` 这样就可以全局改变 Element UI 组件的样式了，包括 Select 组件的下拉框样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值