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

最新推荐文章于 2024-04-16 11:29:45 发布

Nancy哇

最新推荐文章于 2024-04-16 11:29:45 发布

阅读量3.2k

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_45957275/article/details/128999899

版权

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>

/*小图标样式位置**/
  .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;
}