- 在使用到el-select组件中设置:popper-append-to-body=“false”
<el-select
v-model="value"
:popper-append-to-body="false"
placeholder="请选择"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
- 修改样式
<style lang="scss" scoped>
//修改的是el-input的样式
//一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
//另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner{
border-radius: 10px;
color:#fff;
//border: 1px solid green;
border-radius:0px;
border-color:green;
text-align: center;
}
//el-input聚焦的时候 外层的border会有一个样式
::v-deep .el-select .el-input.is-focus .el-input__inner{
//border:0px;
border: 1px solid green;
}
//修改的是el-input上下的小图标的颜色
::v-deep .el-select .el-input .el-select__caret{
color: green;
}
//修改总体选项的样式 最外层
::v-deep .el-select-dropdown{
//rgba(87,133,87,0.8)
background: rgba(87, 133, 87, 0.78);
//margin: 0px;
border:0px;
//border-radius: 0px;
//left: 0px !important;
}
//修改单个的选项的样式
::v-deep .el-select-dropdown__item{
background-color: transparent;
color:#fff;
}
//item选项的hover样式
::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover{
color: rgb(21, 94, 38);
background: rgba(87, 133, 87, 0.3);
}
//修改的是下拉框选项内容上方的尖角
::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after{
display: none;
}
</style>
- 效果
参考:
https://blog.csdn.net/qq_26695613/article/details/127870263
https://blog.csdn.net/Alone_Endeavor/article/details/130986687