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

最新推荐文章于 2025-11-17 14:49:39 发布

原创最新推荐文章于 2025-11-17 14:49:39 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#stylus #elementui #前端

Element 专栏收录该内容

9 篇文章

订阅专栏

这篇博客详细介绍了如何使用 Stylus 编写 CSS，针对 .el-input 组件的禁用状态 .is-disabled 下的 .el-input__inner 类，自定义背景颜色、边框颜色、文字颜色和鼠标指针样式。通过这段代码，开发者可以更好地理解 Stylus 在前端 UI 自定义中的应用。

使用stylus写的，自行修改格式.

/deep/.el-input.is-disabled .el-input__inner
  background-color #5f5f61 !important
  border-color #373a43
  color #C0C4CC
  cursor not-allowed

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

2025专业AI写手!

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

10-14

在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...

el-select 下拉框多选实现全选的实现

10-16

在Web前端开发中，el-select是Element UI库中提供的一个常用的下拉选择组件。它可以方便地实现单选或多选功能，但在某些场景下，用户需要实现全选功能，即在多选下拉框中可以选择或取消选择所有选项。文章《el-...

参与评论您还未登录，请先登录后发表或查看评论

disabled el-select禁用样式修改去掉禁用样式 disabled 变为 readonly

weixin_50885665的博客

02-27

2460

【代码】disabled el-select禁用样式修改去掉禁用样式。

修改elementUI el-select 修改样式背景色下拉框等

最新发布

weixin_50885665的博客

11-17

222

el-select popper-class="sel" v-model="value" placeholder="请选择">

Element UI自定义被禁用（disabled）的单选框的样式

Sk22582的博客

10-31

3209

确保在你的项目中将这些样式应用到相应的单选框组件，这样禁用状态下的单选框样式就会按你定义的方式进行修改。通过定义选择器来修改禁用状态下单选框的外观。这样可以更改被禁用单选框的样式。

修改el单选框被禁用时选中的颜色

冬瓜的博客

05-08

1610

/deep/.el-radio__input.is-disabled.is-checked .el-radio__inner { background-color: #409EFF; // border-color: #E4E7ED;}

element-select disabled只读后修改css字体颜色不生效

qq_34234337的博客

06-27

1983

【element-select disabled只读后修改css字体颜色不生效】今天想做一个动态改变select框字体颜色发现修改不了，原来是select使用disabled，它使用的优先级比color更高的-webkit-text-fill-color，导致怎么设置颜色都无效。重新设置一下-webkit-text-fill-color即可，因为是局部使用的所以加了class（special-color）

Vue中el-form标签中的自定义el-select下拉框标签功能

10-15

`el-select` 是`el-form` 中常用的组件，用于创建下拉选择框，用户可以在预设的选项中进行选择。在某些场景下，我们可能需要自定义`el-select` 的下拉框标签，以满足特定的需求。本文将详细介绍如何在`el-form` 中...

解决ElementUI级联选择器的禁用样式问题

weixin_38514634的博客

01-16

5583

解决ElementUI级联选择器的禁用样式问题发现问题解决写在最后发现问题最近我在项目中使用到了ElementUI级联选择器，不得不说ElementUI真的很强大（老师说在批评一个人的缺点之前需要先肯定他的优点，这样才不会被打），然而在当我根据具体场景需要禁用这个级联选择器的时候，发现了如下几个问题： 1 禁用的字体都是灰色的，但是中间的分隔符还是黑色的 2 虽然是禁用状态，但是鼠标移入到下拉...

动态禁用el-select中某个选项

m0_65299760的博客

02-28

2247

【代码】动态禁用el-select中某个选项。

修改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

4371

Element UI组件在非活性时（Disabled)，字体颜色太淡，显示不清楚，加上以下样式，就可以改变字体颜色了。

elemnet UI table 根据数据状态，禁用多选框并改变背景颜色

灰太郎

10-23

805

element表格如下 <el-table :row-class-name="tableRowClassName" ref="pageTable" row-key="oid" :data="tableData" style="width: 100%"> <el-table-column type="selection" width="55" reserve-selection :selectable="selectEvent"> </el-table-colu.

修改el-input、textarea、el-checkbox的禁用状态下的颜色

qq_1336674576的博客

02-25

6437

修改el-input、textarea、el-checkbox的禁用状态下的颜色

设置el-input或el-select组件disabled时，修改placeholder文本样式

qq_50215564的博客

06-25

555

设置el-input、el-select禁用状态时placeholeder样式

el-select禁用功能扩展

jl____的博客

05-15

754

el-select置灰扩展

修改elementplus中el-input禁用状态下的文字颜色并且文字靠右对齐

m0_47735883的博客

05-31

2721

修改elementplus中el-input禁用状态下的文字颜色并且文字靠右对齐

VueTreeselect 使用史诗级教程

m0_60510238的博客

03-24

6810

在使用vue2前端页面开发的时候，会用到树形的列表展示数据，使用VueTreeselect可以更加美观的展示数据默认的基础使用请参考官方的入门文档很多小伙伴都有使用 RuoYi 框架，其中部门管理中就有使用到本文的主角 VueTreeselect。

vue3 自定义修改elementPlus 的el-select框高度

09-28

<think>我们正在讨论的是Vue3项目中自定义修改Element Plus的el-select框高度的方法。根据用户的问题，我们需要调整el-select组件的高度。在Element Plus中，el-select组件的高度可以通过CSS样式来自定义。通常，我们可以通过覆盖Element Plus的默认样式来实现。注意：由于Element Plus使用了一些内部类名，我们需要确保我们的样式能够正确覆盖，同时避免全局污染。常见做法： 1. 使用深度选择器（::v-deep或:deep()）来穿透作用域样式，以修改组件内部的样式。 2. 直接通过内联样式或者类名样式覆盖。但是，请注意，el-select的高度实际上由多个部分组成，包括输入框的高度和下拉框的高度。用户可能希望调整输入框的高度（即显示选择框的高度）或者下拉框的高度（即下拉选项列表的高度），或者两者都要调整。根据Element Plus的文档和源码，我们可以通过以下方式调整： - 调整输入框高度：通常通过设置el-select的自定义类名，然后修改.el-input__inner的高度。 - 调整下拉框高度：通过设置el-select的props，比如设置`height`属性（单位是像素）来调整下拉框的高度（选项列表的高度）。但用户可能希望自定义整个el-select的高度（包括输入框部分），而不仅仅是下拉框。因此，我们将分别说明。步骤： 1. 调整输入框高度：我们可以给el-select组件添加一个自定义类名，然后通过深度选择器修改内部input的高度。示例代码： <template> <el-select class="custom-select">  </el-select> </template> <style scoped> /* 注意：在scoped样式中，需要使用深度选择器 */ :deep(.custom-select .el-input__inner) { height: 50px; /* 设置你想要的高度 */ } </style> 2. 调整下拉框高度：使用el-select的`height`属性，该属性可以设置下拉框的选项列表的高度（注意：这个高度是每个选项列表的最大高度，超过则出现滚动条）。示例代码： <el-select :height="300">  </el-select> 3. 如果同时需要调整输入框和下拉框，可以结合上述两种方法。另外，还可以通过全局样式来修改，但可能会影响所有el-select，所以建议在需要的地方使用自定义类名。注意：有时候调整了输入框高度，可能需要同时调整字体大小、图标位置等，以达到视觉协调。另外，在Vue3的单文件组件中，使用scoped样式时，穿透选择器的写法可能会有所不同。在Vue3中，推荐使用`:deep()`。如果用户需要修改的是整个el-select组件（包括输入框和下拉框）的样式，可能需要分别调整。但是，根据用户的问题，他特别提到了“el-select框高度”，可能指的是输入框的高度。因此，我们将重点放在输入框高度的调整上。参考用户提供的引用内容并没有直接关于el-select高度的调整，但我们可以根据Element Plus的通用样式覆盖方法来实现。总结： - 调整输入框高度：使用自定义类名和深度选择器修改.el-input__inner的高度。 - 调整下拉框高度：使用el-select的height属性。下面给出一个完整的示例： </think>在 Vue3 项目中自定义修改 Element Plus 的 `el-select` 框高度，可以通过以下方法实现： ### 方法一：CSS 样式覆盖（推荐） ```vue <template> <el-select v-model="value" class="custom-select"  placeholder="请选择" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </template> <style scoped> /* 使用深度选择器穿透组件作用域 */ :deep(.custom-select .el-input__wrapper) { height: 48px; /* 自定义输入框高度 */ padding: 12px 15px; } /* 下拉菜单高度 */ :deep(.custom-select .el-select-dropdown__list) { max-height: 300px; /* 自定义下拉框最大高度 */ } </style> ``` ### 方法二：全局样式修改（修改所有 el-select） ```css /* 在全局 CSS 文件中 */ .el-input__wrapper { min-height: 48px !important; } .el-select-dropdown__list { max-height: 300px !important; } ``` ### 方法三：通过组件属性设置 ```vue <template> <el-select v-model="value" :popper-append-to-body="false"  :teleported="false" >  </el-select> </template> <style> /* 通过自定义类名直接控制 */ .el-select__popper { max-height: 300px !important; } </style> ``` ### 注意事项： 1. **高度自适应**：建议使用 `min-height` 而非固定高度，避免内容截断 2. **作用域问题**：使用 `:deep()` 选择器穿透 scoped 样式限制 3. **响应式设计**：结合媒体查询实现不同屏幕尺寸的适配 ```css @media (max-width: 768px) { :deep(.custom-select .el-input__wrapper) { height: 40px; } } ``` ### 参数说明： | 样式类名 | 作用 | 示例值 | |------------------------|-----------------------|---------------| | `.el-input__wrapper` | 控制输入框容器高度 | `height: 48px`| | `.el-input__inner` | 控制输入框内部尺寸 | `height: 100%`| | `.el-select-dropdown__list` | 控制下拉菜单高度 | `max-height: 300px` | >[^1]: Vue3 中自定义组件样式需使用深度选择器 >[^2]: 响应式设计应结合媒体查询实现多端适配