当前位置：首页 > news >正文

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

news 2025/7/29 11:03:08

一、Select选择器的原生样式的本来面貌

这是原生的没有经过任何加工的面貌：

这是没有经过任何加工的选中时出现下拉框的面貌：

这是没有经过加工的悬浮下拉菜单的面貌：

这是没有经过加工的选中时的面貌：

二、如何修改Select选择器，将她的样子变得好看或者如你所愿

这是原生的copy的代码：

<template><el-select v-model="value" class="m-2" placeholder="请选择" size="large"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select><el-select v-model="value" class="m-2" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select><el-select v-model="value" class="m-2" placeholder="请选择" size="small"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select>
</template>

想要修改她，就必须了解她都有哪一层的“衣服（类名）”，我又该如何给她修改是符合她“身材”（类名）的衣服尺寸大小呢？

三、如何修改？修改的方法是什么？

1、找到下拉框的类名，使用元素检查器查看，并写一个全局的样式

2、通过样式穿透来修改样式

3、通过官方给定的修改方式进行添加类名自定义修改

看着有三种方式，实则这三种方式都不太好找，有时候即使你全部用一遍，发现一个方法生效作用到网页上的样式都没有。此时你是如此的目瞪口呆和哑口无言，就想说一句：Why?我明明...

四、挨个解决

先不管你是不是有这个scoped进行作用域隔离，有没有都无所谓。

有的话无非就是作用到你当前页面，而不会影响到其他页面，即使类名相同。

然后就是核心问题：我该修改哪些类名呢？

我直接告诉你：

修改点击之后的边框和阴影，就修改这个类名：

<style lang="scss" scoped>.el-select__wrapper.is-focused{border-color: var( --focus-border-color) !important;}
</style>

修改下拉框的文字和背景颜色就修改这个类名：

<style lang="scss" scoped>.el-select-dropdown__item {color: var( --text-green-color) !important;}
</style>

修改下拉框的鼠标悬浮的字体颜色和背景颜色就修改这个类名

<style lang="scss" scoped>.el-select-dropdown__item.is-hovering {background-color: var(--bg-green-color) !important;color: var(--text-white-color) !important;}
</style>

修改下拉框的鼠标选中的字体颜色和背景颜色就修改这个类名

<style lang="scss" scoped>.el-select__wrapper.is-focused{border-color: var( --focus-border-color) !important;}
</style>

修改下拉框的原始的就是不点击呈现出来的样式就修改这个类名


<style lang="scss" scoped>.el-select__wrapper {border: 1px solid var(--border-color);box-shadow: none !important;}
</style>

以上就是一些常用的类名，但是这种修改属于全局修改，也就是说如果你不在scoped中写的话，如果你其他地方也用了这个组件，那么也会遵循这个样式，因为这个样式是全局的。

还有一个官方给的：就是给定一个自定义的类名。这里我给的是select_box

<template><div class="lang-switcher"><el-select v-model="selectedLocale" placeholder="选择语言"style="min-width: 100px;width:5vw;":popper-append-to-body="false"class="select_box"><el-option v-for="item in locales" :key="item.code" :label="item.name" :value="item.code"/></el-select></div>
</template>

下面是样式:

<style lag="scss" scoped>
.select_box{// 默认placeholder:deep .el-input__inner::placeholder {font-size: 14px;font-weight: 500;color: #3E534F;}// 默认框状态样式更改:deep .el-input__wrapper {height: 42px;background-color: rgba(0,0,0,0)!important;box-shadow: 0 0 0 1px #204C42 inset!important;--el-select-focus-border-color:#5AC087!important;--el-select-hover-border-color: #5AC087!important;}// 修改下拉框样式-点击框focus:deep .is-focus .el-input__wrapper {box-shadow: 0 0 0 1px #5AC087 inset!important;--el-select-focus-border-color:#5AC087!important;--el-select-hover-border-color: #5AC087!important;}:deep .el-select__caret {color:#5AC087!important;  // 清除按钮}:deep .el-input__inner {color: #5AC087!important; // 选中字体色}
}// 下拉框-展开样式
.el-select-dropdown__item.selected {// background-color: #83e818!important; // 选中
}
.el-select-dropdown__item.hover {background-color: #498f6c!important; // hover
}
:deep .el-dropdown-menu__item:not(.is-disabled) {// color: #182F23!important; // disabled
}
.el-select-dropdown__item {color: #4FC78A !important; // 下拉项颜色
}
:deep .el-popper{background-color: #121f1b!important; // 展开下拉背景border: 1px solid #498f6c!important; // 展开下拉边框
}
:deep .el-popper .el-popper__arrow::before{border-top: 1px solid #498f6c!important; // 箭头按钮边框background-color: #121f1b!important; // 箭头按钮背景色
}
</style>

补充：

在写自定义类名的时候，最好也加上这段代码=》：popper-append-to-bofy="false"加上这个的意思是将这个选项的容器挂载到你的最外层盒子上div#app,如果你不加上这个，那么这个选项的容器就会是最外层盒子的兄弟元素，因为你不是为了避免作用到全局而加上了scoped吗，这个scoped就是将你的样式局限到当前最外层盒子上，如果你即不想影响到全局，又想作用到当前盒子，那么就必须加上这个属性，否则无法具有样式的穿透效果。