vue3—elementPlus如何单独修改页面中的下拉框样式
popper-class="blueBack"(blueBack为自定义class名)vue3中只能去修改popper-class这个属性去修改 (自己想要的样式)重点 :样式修改不能写在scoped中,可以单独开个style。单独写的css 样式(不单独写不生效)
·
vue3中只能去修改popper-class这个属性去修改 (自己想要的样式)重点 :样式修改不能写在scoped中,可以单独开个style
popper-class="blueBack"(blueBack为自定义class名)
<el-select popper-class="blueBack">
<el-option />
</el-select>
单独写的css 样式(不单独写不生效)
<style lang="less">
.el-popper.is-light.blueBack {
background-color: #254277 !important;
border: 1px solid #254277 !important;
}
.blueBack.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
background: #254277 !important;
border: 1px solid #254277 !important;
}
.blueBack.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
background: #254277 !important;
border: 1px solid #254277 !important;
}
.blueBack {
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #2A77C6 !important;
}
.el-select-dropdown__item {
color: #B3BCCE !important;
}
.el-select-dropdown__item.selected {
background: #2A77C6 !important;
}
}
修改下拉框的边框
:deep(.el-input__wrapper) {
background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
}
:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
}
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
}
:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
background: #0b3571;
}
:deep(.el-select .el-input__wrapper) {
background: #0b3571;
}
效果展示
更多推荐
已为社区贡献2条内容
所有评论(0)