element中的select加checkBox

最新推荐文章于 2024-07-14 02:37:49 发布

原创最新推荐文章于 2024-07-14 02:37:49 发布 · 540 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

前端同时被 3 个专栏收录

20 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

element

3 篇文章

订阅专栏

这篇博客介绍了如何通过CSS重写`el-select`组件的样式，特别是`.dc-multiple-select`类下的选中项样式，包括设置选择框的背景颜色、边框、字体样式等，以实现更具个性化的UI设计。

只需要重写select的样式就看可以啦！！！

// 重写el-select下拉选择框
// ******************** //
.dc-multiple-select .el-select-dropdown__item::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 16px;
  font-size: 12px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: 1px solid #dcdfe6;
  width: 15px;
  height: 15px;
  border-radius: 2px;
}

.dc-multiple-select .el-select-dropdown__item.selected::before {
  background-color: #b22;
  border-color: #b22;
}

.dc-multiple-select .el-select-dropdown__item.selected::after {
  right: 18px !important;
  color: #fff !important;
}
// ******************** //