vue.js javascript ecmascript element ui修改select选择框背景色和边框色

一、修改选择框的背景色和边框色

style部分

.custom-select /deep/ .el-input__inner {

color: #fff!important;

border: 1px solid #326AFF;

background: #04308D !important;

}

html部分

要添加class="custom-select"，

我的字体设置不成功，修改样式

.custom-select /deep/ .el-input__inner::placeholder {

color: #fff;

}

二、修改下拉选项的样式

添加:popper-append-to-body="false" 

12

123

124

125

/* // 设置下拉框的背景颜色及边框属性； */

.custom-select /deep/.el-select-dropdown {

/* // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；

// 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示； */

border: 1px solid #326AFF;

background: #04308D !important;

}

/* // 设置下拉框的字体属性及背景颜色； */

.custom-select .el-select-dropdown__item {

font-size: 7px;

color: #fff;

font-weight: 200;

background-color: #04308D ;

}

/* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */

.custom-select /deep/.el-select-dropdown__list {

/* padding-top: 10px; */

padding: 0;

}

/* // 设置输入框与下拉框的距离为：0; (即：样式调整) */

.custom-select /deep/.el-popper[x-placement^="bottom"] {

margin-top: 5px;

}

/* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */

.custom-select /deep/.el-popper .popper__arrow,

.custom-select /deep/.el-popper .popper__arrow::after {

display: none;

}

/* // 设置鼠标悬停在下拉框列表的悬停色； */

.custom-select /deep/.el-select-dropdown__item:hover {

color: rgb(213, 215, 230);

background-color:#326AFF;

}

精彩文章

 您阅读本篇文章共花了：