【Element】自定义修改el-select的禁用框样式

最新推荐文章于 2025-05-09 15:52:03 发布
最新推荐文章于 2025-05-09 15:52:03 发布
阅读量2.5k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Element 文章标签： stylus elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AIB_Kasic/article/details/121651216
这篇博客详细介绍了如何使用 Stylus 编写 CSS，针对 .el-input 组件的禁用状态 .is-disabled 下的 .el-input__inner 类，自定义背景颜色、边框颜色、文字颜色和鼠标指针样式。通过这段代码，开发者可以更好地理解 Stylus 在前端 UI 自定义中的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用stylus写的，自行修改格式.
/deep/.el-input.is-disabled .el-input__inner
  background-color #5f5f61 !important
  border-color #373a43
  color #C0C4CC
  cursor not-allowed
disabled el-select禁用样式 修改 去掉禁用样式 disabled 变为 readonly
weixin_50885665的博客
02-27 2350
【代码】disabled el-select禁用样式 修改 去掉禁用样式。
解决ElementUI级联选择器的禁用样式问题
weixin_38514634的博客
01-16 5537
解决ElementUI级联选择器的禁用样式问题发现问题解决写在最后 发现问题 最近我在项目中使用到了ElementUI级联选择器，不得不说ElementUI真的很强大（老师说在批评一个人的缺点之前需要先肯定他的优点，这样才不会被打），然而在当我根据具体场景需要禁用这个级联选择器的时候，发现了如下几个问题： 1 禁用的字体都是灰色的，但是中间的分隔符还是黑色的 2 虽然是禁用状态，但是鼠标移入到下拉...
修改el单选框被禁用时选中的颜色
冬瓜的博客
05-08 1521
/deep/.el-radio__input.is-disabled.is-checked .el-radio__inner { background-color: #409EFF; // border-color: #E4E7ED;}
VUE el-select下拉框动态设置禁用，删除后恢复可选择
最新发布
Aotman_的博客
05-09 798
点击新增添加按钮，列表table会新增一条包含下拉菜单的数据，如果其中任何一个下拉框选择了某个值，那么新增的下拉菜单的选项中该值是禁用状态，只能选择其他未被选中过的值。点击删除按钮后，已禁用的选项放开，可再次选择。
element-select disabled只读后修改css字体颜色不生效
qq_34234337的博客
06-27 1858
【element-select disabled只读后修改css字体颜色不生效】 今天想做一个动态改变select框字体颜色发现修改不了，原来是select使用disabled，它使用的优先级比color更高的-webkit-text-fill-color，导致怎么设置颜色都无效。重新设置一下-webkit-text-fill-color即可，因为是局部使用的所以加了class（special-color）
动态禁用el-select中某个选项
m0_65299760的博客
02-28 2149
【代码】动态禁用el-select中某个选项。
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
`el-select` 是`el-form` 中常用的组件，用于创建下拉选择框，用户可以在预设的选项中进行选择。在某些场景下，我们可能需要自定义`el-select` 的下拉框标签，以满足特定的需求。本文将详细介绍如何在`el-form` 中...
修改el-select和el-input样式；修改element-plus的下拉框el-select样式；修改placeholder样式
i_am_a_div的博客
08-10 1万+
修改el-select样式；修改element-plus的下拉框el-select样式
Element UI非活性时（Disabled），改变字体颜色
捷锐优快云专栏
11-24 4207
Element UI组件在非活性时（Disabled)，字体颜色太淡，显示不清楚，加上以下样式，就可以改变字体颜色了。
设置el-input或el-select组件disabled时，修改placeholder文本样式
qq_50215564的博客
06-25 499
设置el-input、el-select禁用状态时placeholeder样式
el-select禁用功能扩展
jl____的博客
05-15 703
el-select置灰扩展
ios的input框在禁用状态 字体颜色修改无效？？？？？？
Dark_programmer的博客
04-07 1318
奇奇怪怪，可可爱爱 问题描述： 在移动端有input输入框，但是是禁用的状态，但是默认的字体颜色和大背景颜色又区分不开。想着用 !important强制改掉，在pc端切换成pad模式或者手机模式，显示正常；但是在真正的pad端查看，颜色仍是无变化 问题原因： 移动端环境下android只需设定input的color即可 而ios下input disabled的默认样式会有默认样式opacity以及隐藏样式-webkit-text-fill-color .el-input input{ col.
修改elementUI el-select 修改样式 背景色 下拉框等
热门推荐
c_qianxia5040的博客
10-20 1万+
<div class="select_btn"> <el-select v-model="subItemVal" size="small" style="width: 120px" :popper-append-to-body="false"> <el-option v-for="(item,i) in subItemData" :key="i" :label="item.name" :value="item.number" /> .
Element UI自定义被禁用（disabled）的单选框的样式
Sk22582的博客
10-31 3060
确保在你的项目中将这些样式应用到相应的单选框组件，这样禁用状态下的单选框样式就会按你定义的方式进行修改。通过定义选择器来修改禁用状态下单选框的外观。这样可以更改被禁用单选框的样式。
修改elementplus中el-input禁用状态下的文字颜色并且文字靠右对齐
m0_47735883的博客
05-31 2571
修改elementplus中el-input禁用状态下的文字颜色并且文字靠右对齐
VueTreeselect 使用史诗级教程
m0_60510238的博客
03-24 6621
在使用vue2前端页面开发的时候，会用到树形的列表展示数据，使用VueTreeselect可以更加美观的展示数据默认的基础使用请参考官方的入门文档很多小伙伴都有使用 RuoYi 框架，其中部门管理中就有使用到本文的主角 VueTreeselect。
【vue elementui中el-input输入框禁用】
qq_45278500的博客
12-09 1万+
el-input标签禁用
修改elementui（饿了么）button（按钮）is-disabled的样式影响其他例如输入框disabled的样式
weixin_54495706的博客
01-10 3356
/ 比如输入框加一个:disabled='true'，那输入框的背景色就会变成粉色，必须添加作用域才可以，比如外面嵌套一个带类名的div。// 同理其他按钮类型可以写 .el-button--danger.is-disabled{ ...样式 }// 主要是这里 注意.el-button--primary和.is-disabled之间没有空格。// 如果直接写一个全局样式的话，直接写成如下,所有组件的禁用样式都会受影响力。// ⚠️⚠️⚠️⚠️⚠️⚠️可以这么写更改el-button的样式。
el-select弹出框样式修改
05-01
### 自定义 Element UI `el-select` 弹出框样式 要自定义 Element UI 的 `el-select` 组件弹出框样式，可以通过以下方法实现： #### 方法一：通过 CSS 修改样式 可以利用 `.el-select-dropdown` 类名来覆盖默认的样式。如果需要更深层次的选择器生效，则可以使用 `/deep/` 或者 `::v-deep` 来穿透作用域。 以下是具体的代码示例： ```css /* 调整背景颜色 */ .ym-dialog .el-select-dropdown { background-color: rgb(19, 19, 21) !important; } /* 聚焦时输入框边框和背景颜色 */ .ym-dialog .el-select .el-input.is-focus .el-input__inner { border-color: #0B61AA; background-color: rgba(1, 28, 82, 0.8); color: #00D3E9; } /* 鼠标悬停时选项的颜色和背景 */ .ym-dialog .el-select-dropdown__item.hover, .ym-dialog .el-select-dropdown__item:hover { color: #00D3E9; background-color: #0F3360; } /* 已选中的选项样式 */ .ym-dialog .el-select-dropdown__item.selected { background-color: #f5f7fa33 !important; color: #2285FF !important; } /* 所有选项的文字颜色 */ .ym-dialog .el-select-dropdown__item { color: #e8f4ff !important; } ``` 需要注意的是，在某些情况下，Vue 的 scoped 样式可能会阻止这些样式生效。此时可以尝试使用 `::v-deep`[^1]。 --- #### 方法二：禁用 `popper-append-to-body` 为了使样式的修改更加灵活，建议将 `popper-append-to-body` 属性设置为 `false`。这样可以让弹出框保持在组件内部而不是被挂载到 `<body>` 上，从而更容易控制其样式。 HTML 示例代码如下： ```html <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> ``` 当设置了 `:popper-append-to-body="false"` 后，可以直接通过父级容器选择器来应用样式[^2]。 --- #### 方法三：调整滚动区域样式 有时可能需要进一步优化滚动条或者列表布局的行为。例如解决下拉框最后一项未完全显示的问题，可以通过以下方式处理： CSS 示例代码： ```css /deep/ .el-select-dropdown__wrap { margin-bottom: 0 !important; } /deep/ .el-select-dropdown__list { text-align: left !important; } ``` 此部分主要用于修复一些特定场景下的视觉问题，比如滚动条偏移或内容溢出[^4]。 --- ### 注意事项 - 如果发现样式无法正常生效，请确认是否启用了 Vue 的 Scoped CSS 功能。如果是的话，记得使用 `::v-deep` 或其他类似的深层选择器。 - 设置 `:popper-append-to-body="false"` 可能会影响弹出框的位置计算逻辑，因此需测试不同分辨率下的表现效果[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值