ElementUI,修改el-select下拉框的样式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
- 在使用到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
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)