修改下拉框样式

          <div class="select-switch">
            <div class="selectBox">
              <!--              <div class="selectBox_left">-->
              <!--                <img src="@/assets/location.png" alt="">-->
              <!--              </div>-->
              <div class="selectBox_right">
                <el-select
                  v-model="selectValue"
                  class="btn_select"
                  placeholder="Select"
                  popper-class="selectStyle"
                  size="small"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </div>
       
        </div>
<style scoped lang="scss">
.selectBox {
  //border-top: 5px solid #3498db; /* 上边框颜色 */
  //border-bottom: 1px solid #5aa0bf; /* 下边框颜色 */
  //border-radius: 50%; /* 控制椭圆形状的圆角半径 */
  //background-color: #182741;
  background: url("@/assets/home/select.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  flex-direction: row;
  //height: 45px;
  //width: 120px;
  height: 4vh;
  width: 7vw;
  //margin-right: 22px;

  .selectBox_left {
    flex-grow: 1;
    padding: 10px 0px 10px 15px;

    img {
      height: 100% !important;
    }
  }

  .selectBox_right {
    flex-grow: 2;
    padding: 10px 10px 10px 0;
  }

  :deep(.btn_select) {
    .el-input__wrapper {
      border: none;
      box-shadow: none;
      //background-color: #182741;
      background-color: transparent;

      .el-input__inner {
        border: none;
        color: #fff;
        //font-size: 14px;
        font-size: 0.78vw;
        box-shadow: none;
        position: relative;
        left: 40%;
        //text-align: center;
        //padding-left: 20px
      }

      .el-input__inner.is-active {
        border: none;
        box-shadow: none;
      }

      .el-select__caret.el-icon {
        color: #4cb3d5
      }
    }

    .el-input .el-input__wrapper.is-focus {
      box-shadow: none !important;
    }

    .el-input.is-focus .el-input__wrapper {
      border: none;
      box-shadow: none !important;
    }
  }
}
</style>
<style lang="scss">
//下拉框背景色
.el-popper.is-light.selectStyle {
  z-index: 9999;
  //width: 120px;
  width: 7vw;
  background-color: rgba(7, 24, 55, 1) !important;
  border: 1px solid #55cbef !important;
  //margin: 0 -29px;
}

//下拉框的链接小方块
.selectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
  //background: rgba(0, 136, 255, 0.1) !important;
  //border: 1px solid #254277 !important;
  border: none !important;
  background: none !important;
}

.selectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
  //background: #254277 !important;
  //border: 1px solid #254277 !important;
  border: none !important;
  background: none !important;
}

//鼠标移动上去的选中色
.selectStyle {
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: #174290 !important;
  }

  //下拉框的文本颜色
  .el-select-dropdown__item {
    color: #ffffff !important;
  }

  //选中之后的颜色
  .el-select-dropdown__item.selected {
    //background: #04499b !important;
    color: #02adf6 !important;
  }
}

</style>

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值