【Element-plus】修改el-input、el-select的样式(代码+教程)

想要实现的效果

修改了focus之后的边框，el-popper（选项）的样式，右边小icon的样式

直接上代码

        <el-select 
          v-model="currentLanguage" 
          autocomplete="off" 
          @change="changeLanguage" 
          :popper-append-to-body="false"
          >
          <el-option
            v-for="item in languageOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="select-option"
          >
          <span class="left-label">{{ item.label }}</span>
            <i v-if="item.value === currentLanguage" class="right-icon">
              <el-icon :size="20"><Check /></el-icon>
            </i>
          </el-option> 
        </el-select>

/* select-border */
::v-deep .el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px #E87722;
}

/* expand-icon */
::v-deep .el-select__caret {
  color: #E87722;
}

/* option-label */
.select-option .left-label {
  float: left;
}

/* option-icon */
.select-option .right-icon {
  float: right; 
  transform: translateX(100%);
}

/* option-hover */
.el-select-dropdown__item.is-hovering {
  color: #fff !important;
  background-color: #E87722;
}

学习如何操作

 可以先看看这篇文章：【浏览器】f12控制台，如何选中click、hover才出现的元素（断点调试）-CSDN博客

还是以el-select来举例，使用断点调试选中元素后，找到需要修改的属性（父级，子级的div都点一下，找找要改的样式在哪里，比如我要改的样式是focus到select框之后的边框颜色改变，没想到el-ui是用box-shadow实现的）

对于el-popper的修改

由于el-popper是在app以外的，所以使用deep也没有办法在<style scoped>中修改到

方案1：在style标签里修改，记得多加一下类名，避免污染全局

<style>
    /* option-hover */
    .一些类名 .el-select-dropdown__item.is-hovering {
      color: #fff !important;
      background-color: #E87722;
    }
</style>

方案2：

在 el-select 中添加 :popper-append-to-body="false" 属性，然后就可以直接在<style scoped>中写样式了（不需要deep）

        <el-select 
          v-model="currentLanguage" 
          autocomplete="off" 
          @change="changeLanguage" 
          :popper-append-to-body="false"
          >
          <el-option
            v-for="item in languageOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="select-option"
          >
          <span class="left-label">{{ item.label }}</span>
            <i v-if="item.value === currentLanguage" class="right-icon">
              <el-icon :size="20"><Check /></el-icon>
            </i>
          </el-option> 
        </el-select>