
修改 el-select 下拉框的背景颜色
组件的一个属性,用于指定弹出层的 CSS 类名。通常,它被用来自定义下拉列表的样式。这个 CSS 类应用到下拉弹出层中。因此,您可以在您的 CSS 文件或。类的样式,以更改下拉列表的外观(例如背景颜色、字体颜色等)。添加 popper-class="dropdown"例如,以下是一个示例样式,它为具有。在 Vue.js 中,
·
<el-select @change="changeList" style="width:122px;float: left;" v-model="value1" placeholder="请选择" popper-class="dropdown" class="inputHover2">
<el-option v-for="(item, index) in getListsList" :key="item.id" :label="item.gridName"
</el-select>
添加 popper-class="dropdown"
在 Vue.js 中,popper-class
是 el-selec
t
组件的一个属性,用于指定弹出层的 CSS 类名。通常,它被用来自定义下拉列表的样式。
在这里,popper-class="dropdown"
表示将 dropdown
这个 CSS 类应用到下拉弹出层中。因此,您可以在您的 CSS 文件或 <style>
块中设置 .dropdown
类的样式,以更改下拉列表的外观(例如背景颜色、字体颜色等)。
例如,以下是一个示例样式,它为具有 dropdown
类的下拉列表添加了一些基本样式:
.dropdown {
background-color: #fff;
border: 1px solid #ccc;
color: #333;
font-size: 14px;
padding: 8px 12px;
}
.dropdown {
background: linear-gradient(248deg, #3C556A 0%, #173046 100%);
color: #a2d5e5;
border: 1px solid #5E7788;
box-sizing: border-box;
z-index: 99999 !important;
// box-shadow: 0px 0px 78px rgba(1, 194, 255, 0.4) inset;
.el-select-dropdown__item {
color: #a2d5e5;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: #173046 !important;
box-shadow: 0px 0px 78px rgba(1, 194, 255, 0.4) inset;
}
}
更多推荐
所有评论(0)