Select选择器下拉框样式无法修改原因

一、问题描述

最近做的项目需要用到element的select，我想改成透明背景色，通过查找dom修改样式，但无论怎么修改都始终覆盖不了原来的样式。

二、分析原因

通过仔细查看Dom元素可以发现，官方Select选择器下拉框是直接插入body标签中，与最外级id为app的div同级，所以在Vue中无论怎么写css都无法覆盖到下拉框样式。

源代码

              <el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select>

::v-deep .el-select {width: 350px;
}::v-deep .el-input__inner {background-color: transparent;
}::v-deep .el-select-dropdown__item {color: #fff;
}::v-deep .el-scrollbar,
::v-deep .el-select-dropdown {background-color: transparent !important;color: #fff !important;
}::v-deep .el-scrollbar__wrap,
::v-deep .el-select-dropdown__list {background-color: #0b1a37;color: #fff !important;
}::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {background-color: rgba(0, 0, 0, 0.3);color: #fff;
}

三、解决问题

在ElementUI官方文档中，查找到一个属性：popper-append-to-body（默认值是 true）。

在Select选择器上，添加:popper-append-to-body="false"

           <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"/></el-select>

再次查看select出现的位置，发现此时的代码就位于id为app的div内部，此时在修改就可以覆盖原来的css了

修改好之后的结果

参考自https://blog.csdn.net/qq_36525300/article/details/109026392

ElementUI Select选择器下拉框样式修改相关推荐

antd选择器下拉菜单样式修改
// 选择器外部样式 .ant-select-selection {background-color: #002761 !important;color: rgba(255, 255, 255) !i ...
ElementUI:多个Select下拉框存在时调整个别下拉框样式
当dialog中存在多个下拉框的时候,想改变某一个下拉框的样式,于是给某一个select绑定类,发现并没有生效,换了一种方法,将el-select用div包裹,将类绑定在div上,也没有效果. 在控制 ...
html select 样式t调整_css修改html select下拉框样式(含右边箭头)
css修改html select下拉框样式(含右边箭头)2017-10-12 16:51 我们经常会看到一些页用用的select下拉框非常漂亮,其实很多是用插件实现的. 如果不使用插件,靠纯css能不 ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
css修改layui的下拉框样式 js_layui创建表单下拉框样式不显示
border-left: 5px solid #009688; 注释:solid实体,实心样式: Blockquote:块引用;Fieldset:字段集; 1.所有浏览器都支持标签. fieldse ...
下拉选框样式html,超酷select选择下拉框美化jQuery插件
jquery-nice-select是一款轻量级的select下拉选择框美化jQuery插件.该插件可以将原生的select元素转换为自定义样式的下拉选择框,并且在选择时带有很酷的CSS3过渡动画效果 ...
jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
HTML下拉框样式美化
在网页中,下拉框的样式最难美化,默认样式巨丑,好在现在已经有各种框架实现了下拉框的样式美化,主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换,再将对应选项及事件进行关联. 最近一项 ...
css自定义下拉框样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
ajax 下拉框保留,Ajax生成select级联下拉框和清空多余选项
Ajax生成select级联下拉框和清空多余选项实现效果 function professionType(){ var obj=document.getElementById("下拉框id ...

ElementUI Select选择器下拉框样式修改