el-select修改下拉样式&el-select样式

最新推荐文章于 2024-09-26 14:18:48 发布

不想上班只想要钱

最新推荐文章于 2024-09-26 14:18:48 发布

阅读量211

点赞数 1

分类专栏： vue 前端文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/Aa12364567/article/details/142355724

版权

前端同时被 2 个专栏收录

187 篇文章 3 订阅

订阅专栏

vue

57 篇文章 0 订阅

订阅专栏

.select-form /deep/ .el-select-dropdown {
  text-align: left;
  background-color: rgba(5, 30, 74, 0.95) !important;
}

/* 下拉框选中 */
::v-deep .el-select-dropdown__item {
  color: #fff;
}
 /* 鼠标经过下拉框 */
::v-deep .el-select-dropdown__item.hover {
  color: #00bbff;
  background: transparent;
}
/* 选中当前项文字颜色 */
::v-deep .el-select-dropdown__item.selected {
  color: #00bbff;
}

.select-form {
  position: relative;
  left: 0;
  /* top: 5px; */
  display: inline-block;
}

.select-form /deep/ .el-form-item {
  margin-bottom: 0px;
  margin-top: 0px;
}

.select-form /deep/ .el-form-item__label {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: #fff;
  line-height: 32px;
  /* margin-left: 34px; */
  padding: 0;
  margin-right: 10px;
}

.select-form /deep/ .el-form-item__content {
  width: 250px;
  margin-left: 0px !important;
}

.select-form /deep/ .el-input__inner {
  width: 180px;
  height: 32px;
  line-height: 32px;
  /* background: rgba(22, 212, 255, 0.26); */
  background: rgba(22, 119, 255, 0.14);
  border: 1px solid rgba(22, 119, 255, 0.14);
  box-shadow: inset 0px 0px 6px 0px rgba(83, 203, 255, 0.3);
  font-size: 14px;
  font-family: SourceHanSansCN-Normal;
  font-weight: 400;
  color: #FFFFFF;
}

.select-form /deep/ .el-select-dropdown {
  text-align: left;
  background-color: rgba(5, 30, 74, 0.95) !important;
}

    <el-form label-width="45px" :model="model" size="mini" class="select-form">

      <el-form-item label="湾区">

        <el-select v-model="model.sea" :placeholder="'请选择'" clearable :popper-append-to-body="false"
          @change="changeOption">

          <el-option v-for="(item, index) in seaOptions" :key="index" :label="item.label"
            :value="item.value"></el-option>

        </el-select>

      </el-form-item>

    </el-form>