Element 如何修改组件样式

最新推荐文章于 2025-06-11 12:21:17 发布

三七归故里

最新推荐文章于 2025-06-11 12:21:17 发布

阅读量750

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui 文章标签： css vue.js css3

本文链接：https://blog.csdn.net/weixin_43859511/article/details/122580838

element-ui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何修改Element UI中el-select组件的样式。作者尝试直接修改.el-select样式未成功，后通过深入研究发现需使用自定义类名配合深元素选择器来修改内部的.el-input__inner样式。

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

原因：想使用 Element 中 Select 选择器制作一个这样的样式，然后我就想要修改el-select的样式。
在这里插入图片描述
踩过的坑：

然后我直接在


```css
.my-select{
  border: 1px solid red ;
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/0a9fa81b28da4cc39c4b5a141b0e7212.png)
发现有两层样式，就说明并没有改到该改的样式。

F12 查看样式后发现是在这个class :.el-input__inner, 然后问题来了，我要怎么才能修改到这个样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/cbdf4419331f4cc4ab54f0b15451daad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiJ5LiD5b2S5pWF6YeM,size_17,color_FFFFFF,t_70,g_se,x_16)
通过查找资料后  >>>

```css
 .my-select >>> .el-input__inner {
 border: 1px solid red ;
}

注意：一定要使用由自己定义的class >>> 才能修改

在这里插入图片描述