element ui修改select选择框背景色和边框色

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

style部分

.custom-select /deep/ .el-input__inner {color: #fff!important;border: 1px solid #326AFF;background: #04308D !important;
}

html部分

 <el-select class="custom-select" v-model="dhvalue" placeholder="请选择" style="width:90%" size="mini"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>

要添加class="custom-select"，

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

.custom-select /deep/ .el-input__inner::placeholder {
color: #fff;
}

二、修改下拉选项的样式

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

<el-select  :popper-append-to-body="false" class="custom-select" v-model="dhvalue" placeholder="请选择" style="width:90%" size="mini"><el-option value="1">12</el-option><el-option value="1">123</el-option><el-option value="1">124</el-option><el-option value="1">125</el-option></el-select>

/* // 设置下拉框的背景颜色及边框属性； */
.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;
}