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; }