当前位置:   article > 正文

修改el-select默认样式_el-select更改样式

el-select更改样式

        在开发过程中,我们一般遇到特殊的UI效果图,不得不修改<el-select>默认样式了。

修改el-select框样式

  1. <template>
  2. <el-select
  3. v-model="yearValue"
  4. class="select_box"
  5. multiple
  6. placeholder="请选择年份支持多选"
  7. :teleported="false"
  8. >
  9. <el-option
  10. v-for="item in yearOptions"
  11. :key="item.value"
  12. :label="item.label"
  13. :value="item.value"
  14. />
  15. </el-select>
  16. </template>
  1. .select_box {
  2. width: 170px;
  3. // 默认placeholder
  4. :deep(.el-input__inner::placeholder) {
  5. color: #ccc;
  6. }
  7. // 默认框状态样式更改
  8. :deep(.el-input__wrapper) {
  9. background-color: #1d333700 !important;
  10. box-shadow: 0 0 0 1px #3fa6f4 inset !important;
  11. --el-select-focus-border-color: #3fa6f4 !important;
  12. --el-select-hover-border-color: #3fa6f4 !important;
  13. }
  14. // 修改下拉框样式-点击框focus
  15. :deep(.is-focus .el-input__wrapper) {
  16. box-shadow: 0 0 0 1px #3fa6f4 inset !important;
  17. --el-select-focus-border-color: #3fa6f4 !important;
  18. --el-select-hover-border-color: #3fa6f4 !important;
  19. }
  20. :deep(.el-select__caret) {
  21. color: #3fa6f4 !important; // 清除按钮
  22. }
  23. :deep(.el-input__inner) {
  24. color: #3fa6f4 !important; // 选中字体色
  25. }
  26. :deep(.el-select-dropdown__empty) {
  27. background-color: #072258;
  28. color: #ddd !important;
  29. }
  30. :deep(.el-select-dropdown__wrap) {
  31. color: #fff;
  32. background-color: #072258;
  33. color: #ddd !important;
  34. }
  35. :deep(.el-select-dropdown__item) {
  36. color: #fff !important;
  37. }
  38. :deep(.el-select-dropdown__item.hover) {
  39. background-color: rgb(22, 81, 244) !important;
  40. color: #ddd !important;
  41. }
  42. :deep(.el-select-dropdown__item.selected) {
  43. background-color: rgb(22, 81, 244) !important;
  44. color: #ddd !important;
  45. }
  46. :deep(.el-select-tags-wrapper.has-prefix>span) {
  47. background-color: rgb(22, 81, 244) !important;
  48. color: #ddd !important;
  49. }
  50. }
  51. // 下拉框-展开样式
  52. .el-select-dropdown__item.selected {
  53. // background-color: #83e818!important; // 选中
  54. }
  55. .el-select-dropdown__item.hover {
  56. background-color: #121f1b !important; // hover
  57. }
  58. :deep .el-dropdown-menu__item:not(.is-disabled) {
  59. // color: #182F23!important; // disabled
  60. }
  61. .el-select-dropdown__item {
  62. color: #3fa6f4 !important; // 下拉项颜色
  63. }
  64. :deep .el-popper {
  65. background-color: #121f1b !important; // 展开下拉背景
  66. border: 1px solid #3fa6f4 !important; // 展开下拉边框
  67. }
  68. :deep .el-popper .el-popper__arrow::before {
  69. border-top: 1px solid #3fa6f4 !important; // 箭头按钮边框
  70. background-color: #121f1b !important; // 箭头按钮背景色
  71. }

这里需要注意一点,<el-select>修改下拉框的样式需要加上:teleported="false"详细看element plus官网文档

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小桥流水78/article/detail/928637
推荐阅读
相关标签
  

闽ICP备14008679号