赞
踩
在开发过程中,我们一般遇到特殊的UI效果图,不得不修改<el-select>默认样式了。
- <template>
- <el-select
- v-model="yearValue"
- class="select_box"
- multiple
- placeholder="请选择年份支持多选"
- :teleported="false"
- >
- <el-option
- v-for="item in yearOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </template>

- .select_box {
- width: 170px;
-
- // 默认placeholder
- :deep(.el-input__inner::placeholder) {
- color: #ccc;
- }
-
- // 默认框状态样式更改
- :deep(.el-input__wrapper) {
- background-color: #1d333700 !important;
- box-shadow: 0 0 0 1px #3fa6f4 inset !important;
- --el-select-focus-border-color: #3fa6f4 !important;
- --el-select-hover-border-color: #3fa6f4 !important;
- }
-
- // 修改下拉框样式-点击框focus
- :deep(.is-focus .el-input__wrapper) {
- box-shadow: 0 0 0 1px #3fa6f4 inset !important;
- --el-select-focus-border-color: #3fa6f4 !important;
- --el-select-hover-border-color: #3fa6f4 !important;
- }
-
- :deep(.el-select__caret) {
- color: #3fa6f4 !important; // 清除按钮
- }
-
- :deep(.el-input__inner) {
- color: #3fa6f4 !important; // 选中字体色
- }
-
- :deep(.el-select-dropdown__empty) {
- background-color: #072258;
- color: #ddd !important;
-
- }
-
- :deep(.el-select-dropdown__wrap) {
- color: #fff;
- background-color: #072258;
- color: #ddd !important;
- }
-
- :deep(.el-select-dropdown__item) {
- color: #fff !important;
- }
-
- :deep(.el-select-dropdown__item.hover) {
- background-color: rgb(22, 81, 244) !important;
- color: #ddd !important;
- }
-
- :deep(.el-select-dropdown__item.selected) {
- background-color: rgb(22, 81, 244) !important;
- color: #ddd !important;
- }
-
- :deep(.el-select-tags-wrapper.has-prefix>span) {
- background-color: rgb(22, 81, 244) !important;
- color: #ddd !important;
- }
- }
-
- // 下拉框-展开样式
- .el-select-dropdown__item.selected {
- // background-color: #83e818!important; // 选中
- }
-
- .el-select-dropdown__item.hover {
- background-color: #121f1b !important; // hover
- }
-
- :deep .el-dropdown-menu__item:not(.is-disabled) {
- // color: #182F23!important; // disabled
- }
-
- .el-select-dropdown__item {
- color: #3fa6f4 !important; // 下拉项颜色
- }
-
- :deep .el-popper {
- background-color: #121f1b !important; // 展开下拉背景
- border: 1px solid #3fa6f4 !important; // 展开下拉边框
- }
-
- :deep .el-popper .el-popper__arrow::before {
- border-top: 1px solid #3fa6f4 !important; // 箭头按钮边框
- background-color: #121f1b !important; // 箭头按钮背景色
- }

这里需要注意一点,<el-select>修改下拉框的样式需要加上:teleported="false"详细看element plus官网文档
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。