修改Element中select的样式

咸鱼!

已于 2023-08-10 15:11:45 修改

阅读量1.5k

点赞数 3

文章标签：前端 elementui css

于 2023-08-10 15:09:13 首次发布

本文链接：https://blog.youkuaiyun.com/NewBie96/article/details/132210126

版权

本文介绍了如何将`popper-append-to-body`属性设置为false以解决弹出框定位问题，同时详细展示了如何使用CSS修改El-Input和El-Select组件的样式，如背景色、文字颜色和选中状态。

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

一. popper-append-to-body (默认为true) 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false

注意:这边一定要将popper-append-to-body的值改为false,否则不生效

二.css代码

// 修改筛选框背景色及文字颜色样式
::v-deep .el-input__inner {
  color: #fff;
  background: rgba(8, 106, 255, 0.2);
  border-color: rgba(8, 106, 255, 1);
}
// 去除筛选框下拉时自带的样式 border,添加背景色
::v-deep .el-select-dropdown {
  border: none;
  background-color: rgba(5, 30, 74, 0.95) !important;
}

// //下拉框选中
::v-deep .el-select-dropdown__item {
  color: #eee;
}
// 鼠标经过下拉框
::v-deep .el-select-dropdown__item.hover {
  color: #086aff;
  background: transparent;
}
// 选中当前项文字颜色
::v-deep .el-select-dropdown__item.selected {
  color: #fff;
}