element el-select 调整高度

vue yekong

将原有的默认40px高度修改为30px
这里使用了::v-deep
wanjunshijiecom20220724kSeL4l

html

      <el-select class="topselect w130 ml15" v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

css

.topselect {
  ::v-deep {
    .el-input__inner {
      height: 30px;
      background: rgba(29, 214, 226, 0.1) !important;
      border: 1px solid #01DEEF !important;
    }

    .el-input__prefix, .el-input__suffix {
      height: 30px;
    }

    /* 下面设置右侧按钮居中 */
   .el-input__suffix {
      top: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }
    .el-input__icon {
      line-height: 32px;
    }
  }
}
喜欢