element-plus 修改el-select 箭头样式

自己摸索的,element-plus和element-ui的修改方式不太一样。

<div class="v-header-select">

           <el-select

      :model-value="data.modelValue"

      :placeholder="data.placeholder"

      :size="data.size"

      popper-class="_name-style"

    >...(代码结构略去)
样式部分:
.v-header-select {
     :deep(.el-select) {//deep穿透

    .el-input .el-select__caret{//箭头样式


        background: url(~statics/header/自定义箭头图片.svg) no-repeat;//自定义图片

        transform: rotateZ(0deg);//转动图片

        appearance: none;

        background-size: 8px 8px;

        width: 14px;

        height: 14px;

        position: absolute;//图片定位

        top:5px;

        right: 0px;

    }

      .el-icon svg{//隐藏原来箭头

          display:none

        }
}
可正常使用~

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容