两大老板间周旋-心累

### 如何自定义 Element UI `el-select` 下拉菜单样式 为了修改 `el-select` 组件的下拉菜单背景色或文本颜色，可以采用多种方法来实现这一目标。 #### 方法一：通过 CSS 覆盖默认样式 当希望调整弹出框的颜色时，在 HTML 的 `el-select` 标签中加入属性 `:popper-append-to-body="false"` 可防止其被附加至 body 中[^1]： ```html <el-select :popper-append-to-body="false"> </el-select> ``` 接着利用深度选择器覆盖原有样式。对于 Vue CLI 项目而言，推荐使用 `/deep/` 或者 `::v-deep` 来穿透作用域链并影响子组件中的类名[^3]: ```css /* 修改下拉列表项 */ .el-select-dropdown { background-color: #000 !important; } /* 修改选项文字颜色 */ .el-select-dropdown li { color: #fff !important; } ``` #### 方法二：针对特定实例应用特殊样式 如果仅需改变单个页面上的 `el-select` 行为而不影响其他地方，则可以在该文件内部创建一个唯一的 class 并指定给 `<style scoped>` 块下的 `.custom-select /deep/ .el-input__inner::placeholder` 类似这样的路径来进行更精确的选择[^2]: ```scss <style lang="scss" scoped> .custom-select { /* ... */ ::v-deep .el-input__inner::-webkit-input-placeholder { color: #ffffff; } ::v-deep .el-input__inner:-ms-input-placeholder { color: #ffffff; } ::v-deep .el-input__inner::placeholder { color: #ffffff; } } </style> <!-- 使用 --> <div class="custom-select"> <el-select></el-select> </div> ``` 以上两种方式均能有效达到定制化需求的效果。值得注意的是，由于框架版本差异等因素的影响，实际操作过程中可能还需要进一步调试以确保最佳效果。