📝 个人简介

⭐ 个人主页：我是段段🙋‍
🍊 博客领域：编程基础、前端💻
🍅 写作风格：干货！干货！都是干货！
🍑 精选专栏：Vue
🛸 支持段段：点赞👍、收藏⭐、留言💬

前言

最近写项目的时候，需要对element中原有的下拉框组件进行整体样式的修改，修改完成后简单记录一下

原有组件里的el-select下拉框

这是修改完成之后的样式

页面的DOM元素也是直接使用组件中的例子

<template><div class="wrap"><div class="dark-select"><el-select v-model="value" placeholder="请选择" :popper-append-to-body="false"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"class="provinces_select">el-option>el-select>div>div>
template>

需要注意的是el-select的popper-append-to-body属性

popper-append-to-body：

此属性是用来判断是否将弹出框（options）插入值body元素中，接受一个布尔值，默认值为true

当需要修改其样式时，可将其属性值设置为false

js中的data数据也是使用官网的假数据

data() {return {options: [{value: "选项1",label: "黄金糕",},{value: "选项2",label: "双皮奶",},{value: "选项3",label: "蚵仔煎",},{value: "选项4",label: "龙须面",},{value: "选项5",label: "北京烤鸭",}],value: ""};
}

最重要的是css代码，具体修改的方法如下

.wrap{width 100%height 100vhbackground-color #191c26padding-top 200px
}
.dark-select { // 修改input默认值颜色 兼容其它主流浏览器/deep/ input::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.50);}/deep/ input::-moz-input-placeholder {color: rgba(255, 255, 255, 0.50);}/deep/ input::-ms-input-placeholder {color: rgba(255, 255, 255, 0.50);}// input框/deep/ .el-select,/deep/ .el-input,/deep/ .el-input__inner {background-color: rgba(255, 255, 255, 0.04);color: rgba(255, 255, 255, 0.50);border: none; // 去掉边框// border-color: #XXXXXX // 默认边框的颜色text-align: left;border-radius: 4px;}// 选中时边框颜色// /deep/ .el-input__inner:focus{//     border-color: #XXXXXX;// }// 鼠标悬浮时 input框颜色/deep/ .el-input__inner:hover{background-color: rgba(255, 255, 255, 0.12);}// input框 右侧的箭头/deep/ .el-select .el-input .el-select__caret {color: rgba(255, 255, 255, 0.50);}// option选项 上面的箭头/deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {border-bottom-color: rgba(43, 45, 55, 0.80);z-index: 9999;}/deep/ .popper__arrow {border: none;}// option选项 最外层/deep/ .el-select-dropdown {border: none !important;background: rgba(43, 45, 55, 0.80) !important;z-index: 9999;}// option选项 文字样式/deep/ .el-select-dropdown__item {color: rgba(255, 255, 255, 0.50) !important;z-index: 9999;}/deep/ .el-select-dropdown__item.selected span{color: rgba(255, 255, 255, 0.80) !important;z-index: 9999;}// 移入option选项 样式调整/deep/ .el-select-dropdown__item.hover{background-color: rgba(255, 255, 255, 0.06);color: rgba(255, 255, 255, 0.80) !important;z-index: 9999;}// 下拉框垂直滚动条宽度/deep/ .el-scrollbar__bar.is-vertical {width: 10px;top: 2px;}// 下拉框最大高度/deep/ .el-select-dropdown__wrap {max-height: 200px;}
}

如果出现了滚动条，option选项框在上方时，发现箭头颜色并未修改

此时需要在option选项 上面的箭头下方添加如下代码

// option选项 下面的箭头/deep/ .el-popper[x-placement^="top"] .popper__arrow::after {border-top-color: rgba(43, 45, 55, 0.80);z-index: 9999;}

再次刷新页面可以看到问题已经解决

注意！！！

/deep/在vue3.0会报错，如果报错，可采用::v-deep，二者效果基本一致，需要修改的样式差不多就这些

这个demo是单写了一个vue项目，而且页面中只有el-select组件，但在实际应用中，还需要根据具体的项目进行具体分析，但是修改方式大同小异~~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！