vue3+js 下拉el-select样式修改

发布时间:2026/5/26 2:01:11

vue3+js 下拉el-select样式修改 el-select popper-classmy-custom-dropdownclearable v-modelsearchModel.alarmLevelstylewidth: 300px;placeholder请选择el-option v-for(item, index) in alarmLevels:keyindex:labelitem.label:valueitem.value/el-option/el-selectstyle/* 全局样式文件或者 style 不带 scoped */.my-custom-dropdown{background-color:#07224c;border-radius:8px;padding:10px;}.my-custom-dropdown.el-popper.is-light{border:1px solid #236ace;--el-popper-bg-color-light:#07224c;}.my-custom-dropdow.el-popper.is-light.el-popper__arrow:before{border:1px solid red;}/* .el-popper.is-light.el-popper__arrow:before */.my-custom-dropdown.el-select-dropdown__item{color:#fff;font-size:14px;}.my-custom-dropdown.el-select-dropdown__item:hover{background-color:#236ace;color:#fff;}.my-custom-dropdown.el-select-dropdown__item.is-selected{background-color:#1158bc85!important;}.my-custom-dropdown.el-select-dropdown__item.is-hovering{background-color:#1158bc85!important;}.my-custom-dropdown.el-tree-select__popper{background:rgba(23,101,210,0.01);box-shadow:inset-2px 2px 5px 0pxrgba(75,150,255,0.3),inset 3px-2px 5px 0pxrgba(75,150,255,0.25);border-radius:2px 2px 2px 2px;border:1px solid #236ace;.el-tree-node__content{color:#fff;background:rgba(23,101,210,0.01)!important;:hover{background-color:#1158bc85;}}.el-select-dropdown__item,.el-select-dropdown__item.is-selected,.el-select-dropdown__item.is-hovering{background:rgba(23,101,210,0.01)!important;}}.my-custom-dropdown.el-select__selection{.el-select__selected-item.el-tag{background-color:#1158bc85;color:#fff;}}/style

相关新闻