Element-plus 【el-input输入框】和【el-select下拉选择框】样式修改

最新推荐文章于 2025-07-28 13:25:42 发布

原创最新推荐文章于 2025-07-28 13:25:42 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

el-input & el-select

参考链接：

【1】【浏览器】f12控制台，如何选中click、hover才出现的元素（断点调试）_f12跟踪click-CSDN博客

【2】

Element-plus的el-input改边框focus后颜色_element input框出发焦点改变边框颜色-CSDN博客

【3】

【Element-plus】修改el-input、el-select的样式(代码+教程)_elementplus中select和tree中的ishovering的样式-CSDN博客

首先根据参考链接1的方法，通过打断点，可以找到el-select 选中元素的样式是由：

el-select-dropdown__item.is-selected

控制的，

因此在代码中这样修改：[这样修改所有的下拉框的选中选项颜色都会变成红色]

<style lang="scss" scoped>
.el-select-dropdown__item.is-selected{
    color:red !important;
    font-weight:bold;
}
</style>

el-input样式的修改可以参考链接2；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

selfsuer

关注关注

7
点赞
踩
4

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式，解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式

🏆 前端领域优质创作者

03-23

1万+

vue3，element-plus，el-select，下拉选择器，下拉选择框，Select选择器，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementPlus选择器如何覆盖hover效果，使用deep改不了样式，修改边框颜色，select去掉边框，vue3+elementPlus中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，

Vue3 - Element Plus 选择器 el-select 既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）

🏆 前端领域优质创作者

12-02

1万+

vue3，elementplus，select选择器，el-select，el-select实现可下拉选择和手动输入，element-plus组件库中选择器怎么像输入框一样可以输入，既可以手输也可以选择，el-select可选择可以手动输入，Vue3使用el-select下拉框实现可输入可选择，el-select可新增输入可选择，vue3使用elementplus选择器Select既可以下拉选择也可以手动输入，实现el-select可选择/可输入，怎么能让输入框又能选择又能输入文本，既有下拉功能也有输入

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

前端开发el-select下拉框样式修改方案：解决背景色、hover及字体样式定制问题了文档的核心内容

04-05

内容概要：本文主要讲解了el-select下拉框选项样式的修改方法。文章首先介绍了网上常见的三种修改样式的方法及其存在的问题，接着深入分析了问题产生的原因，即el-select选项的容器不在挂载的div#app中，导致设置的样式无法正常作用。然后提出了解决方案——通过设置Popper-append-to-body属性为false，将el-select选项的内容移动到div#app当中。最后详细展示了如何使用less编译样式对el-select各个部分（如placeholder、el-input、el-select-dropdown、el-select-dropdown__item等）进行样式修改，包括背景色、字体颜色、边框、圆角、hover效果等，还提供了隐藏下拉框尖角的方法。; 适合人群：熟悉前端开发，尤其是使用过Element-UI框架的开发者。; 使用场景及目标：①掌握el-select下拉框样式修改的正确方法；②理解el-select组件的DOM结构特点；③学会使用less编译样式修改el-select各个部分的样式。; 阅读建议：本文涉及到具体的样式代码和Element-UI组件特性，建议读者在阅读时结合实际项目进行尝试，并查阅Element-UI官方文档以加深理解。

被困扰的elementplus样式修改问题：select选择器修改和el-input修改

热门推荐

xla_java的博客

12-15

1万+

Vue3：修改element-plus下拉框el-select的样式。三步走，总有一款适合你。（样式穿透）

Element-Plus 修改 el-select 下拉选择框选择某个值是，如何修改字体颜色

03-22

根据引用[2]中的信息，用户通过使用深度选择器:deep(.select-one)来修改el-input__inner的color属性，将输入框内的文字颜色改为白色。这可能是一个关键点，因为选中后的值通常显示在输入框中。所以，修改.el-input__...

详解element-ui设置下拉选择切换必填和非必填

12-10

在Element-UI中，开发Web应用时常会遇到需要动态调整表单验证规则的情况，比如一个下拉选择框根据用户的选择，使得某个输入框变为必填或非必填。本篇文章将详细讲解如何实现这一功能。首先，我们来看一下具体的...

elementUI的el-select和el-input中样式无法添加问题解决

u1873798的博客

07-11

849

// 输入框 <el-input class="header-input"></el-input> //选择框 <el-select v-model="selectVal" class="selecter"> <el-option v-for="item in options"></el-option> </el-select> <style> //只有加上::v-deep才能成功添加样式 ::v-deep .

Vue3+element PLUS 2.5 中el-select样式修改

先生有火吗

04-16

1366

首先是需要在<el-select>标签中添加:teleported="false"属性，表示不将弹出框元素添加到body当中。本人针对网上的一些教程进行了总结，然后自己进行了测试最终修改成功了，把代码发出来供大家参考。针对elementplus中的el-select样式是不是很多小伙伴都感觉难以修改呢？先展示下最终的样式效果（下拉框上面那个菱形我也不知道怎么改，望小伙伴告知）。然后是一系列对下拉框的修改，我就直接贴代码了，方便大家复制粘贴。

修改elementplus的输入框颜色

weixin_45960031的博客

05-27

1336

修改elementplus的el-input的样式

elementPlus自定义el-select下拉样式

蜗牛~~

07-02

1011

即可，这样就可以将下拉框添加到body元素中去，否则当我们失去焦点，下拉就消失了，在元素中找不到el-select。剩下就可以通过如何自定义，大家自行设置吧~如何在f12元素选择器上找到下拉div呢？给el-select添加。

使用scss改变elementplus中el-menu组件的下拉区域的颜色

qq_52200678的博客

07-11

2144

【代码】使用scss改变elementplus中el-menu组件的下拉区域的颜色。

element ui修改select选择框背景色和边框色

weixin_47194802的博客

11-16

1万+

要添加class="custom-select"修改选择框的背景色和边框色。

如何配置Element-Plus主题颜色

bo_bo001的博客

09-18

1176

在 Node.js 项目中安装 Sass 预处理器的命令。【1】npm i sass-D中的 i 为 install的简写，表示安装一个或者多个包。【3】-D是一个标志，在npm中将sass包作为项目的开发依赖项来安装。【2】sass是要安装的npm包的名称。4.覆盖ElementPlus样式。辅助色：除了主色外的其他场景。主色：表现出网站的整体色系。3.准备定制样式文件。

Element-Plus 修改 el-select 选择器下拉列表中当前选中选项的文字显示颜色

timzhangt的博客

03-25

2432

【代码】Element-Plus 修改 el-select 选择器下拉列表中当前选中选项的文字显示颜色。

Element Plus中el-select选择器的下拉选项列表的样式设置

BillKu的博客

02-27

1212

el-select 标签设置 popper-class="custom-select-dropdown"通过 popper-class 自定义类名修改下拉选项列表样式。

对ElementPlus的el-select二次封装，添加分页和搜索功能，实现一个自定义的下拉选择框

lfeishumomol的博客

10-12

3097

在的项目中，我们经常需要使用下拉选择框 () 来展示大量数据。然而，默认情况下 el-select 不支持分页和搜索功能。本文将介绍如何通过二次封装组件来实现这一需求，并使用自定义的来简化开发流程。