element ui修改select选择框背景色和边框色-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui修改select选择框背景色和边框色。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

element ui选择框,vue.js,javascript,ecmascript

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

element ui选择框,vue.js,javascript,ecmascript

二、修改下拉选项的样式

添加:popper-append-to-body="false" 文章来源地址https://www.toymoban.com/news/detail-756221.html

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

到了这里，关于element ui修改select选择框背景色和边框色的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！