vue3 中Element Plus的el-select 样式(包括更换小图标样式)_vue

vue3 中Element Plus的el-select 样式(包括更换小图标样式)

 <el-select
        v-model="value"
        class="m-2"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      /*更换选择框后面的小图标**/
      <el-icon class="icon">
        <Rank />
      </el-icon>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/*小图标样式位置**/
  .icon{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10px;
		  color: rgb(86, 215, 255);
 }
/*更换背景颜色**/
::v-deep .el-input__wrapper {
background:url('@/assets/image/bg.png')  50% center / cover no-repeat
}

::v-deep .el-select .el-input__inner{
  text-align: center;
  color: #fff !important;
}
/*小图标隐藏**/
::v-deep  .el-input .el-input__suffix .el-input__suffix-inner .el-select__caret{
color: transparent;
}

::v-deep  .el-input__inner::placeholder {
  color: #fff;
  font-size: 14px;
  text-align: center;
}
/*各种边框线隐藏**/
::v-deep .el-select {
  --el-select-input-focus-border-color: none !important;
}
::v-deep .el-input__wrapper {
  box-shadow: none !important;
}
::v-deep  .el-select .el-input.is-focus .el-input__wrapper {
  box-shadow: none !important;
}
::v-deep  .el-select .el-input__wrapper.is-focus {
  box-shadow: none !important;
}
::v-deep  .el-select:hover:not(.el-select--disabled) .el-input__wrapper {
  box-shadow: none !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43