element ui

最新推荐文章于 2025-07-11 13:49:54 发布

原创最新推荐文章于 2025-07-11 13:49:54 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

这篇文章展示了如何使用CSS深度选择器`::v-deep`来定制Vue组件ElementUI的el-select下拉菜单样式，包括宽度、背景色、字体颜色等，以及在鼠标悬停时的高亮效果。

select 下拉菜单样式修改

上代码

::v-deep .el-select {
  width: 25%;
}

::v-deep .el-input__inner {
  background-color: transparent;
  color: #fff;
}

::v-deep .el-select-dropdown__item {
  color: #fff;
}

::v-deep .el-scrollbar,
::v-deep .el-select-dropdown {
  background-color: transparent !important;
  color: #fff !important;
}

::v-deep .el-scrollbar__wrap,
::v-deep .el-select-dropdown__list {
  background-color: rgba(6, 53, 95, 0.7);
  color: #fff !important;
}

::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
}