下拉框的option样式只能在全局样式里改,千万不能用scope,否则不生效
<el-select
class="select"
:popper-append-to-body="false"
v-model="selectValue"
placeholder="请选择"
popper-class="select-option">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<style lang="scss">
.select-option{
background-color: rgba(37, 37, 41, 0);
border-radius: 0;
border: 1px solid rgba(50, 50, 59, 1);
}
.el-select-dropdown__item.selected {
font-size: 14px;
font-weight: 400;
background-color: rgba(22, 22, 27, 1);
color: #eea635 !important;
}
.el-select-dropdown__item.active{
background-color: rgba(37, 37, 41, 1);
}
/* 消除小三角 */
.el-popper[x-placement^=bottom] .popper__arrow{
border: none;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
border: none;
}
.el-popper[x-placement^=bottom]{
margin-top: 0;
}
</style>
.select{
width: 110px;
height: 22px;
background-color: rgba(0,0,0,0);
}
<el-select
class="select"
:popper-append-to-body="false"
v-model="selectValue"
placeholder="请选择"
popper-class="select-option"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
/deep/ .el-input__inner{
background-color: rgba(0,0,0,0);
border-radius: 0px;
border: 1px solid rgba(22, 22, 27, 1);
height: auto;
line-height: 22px;
color: rgba(255, 255, 255, 0.65);
}
/deep/ .el-input__icon{
line-height: 22px;
}
/deep/ .el-select .el-input.is-focus .el-input__inner{
border-color: rgba(238, 166, 53, 1);
}
/deep/ .el-select .el-input__inner:focus{
border-color: rgba(238, 166, 53, 1);
}、
/deep/ .el-select .el-input.is-focus .el-input__inner{
border-color: rgba(238, 166, 53, 1);
}
/deep/ .el-select .el-input__inner:focus{
border-color: rgba(238, 166, 53, 1);
}
改完之后样式如图:
基本上所有样式都改了,如果是大佬建议直接自己写个封起来。
标签:__,el,elementPlus,color,rgba,vue3,border,select From: https://blog.51cto.com/u_15939684/6251898