首先,你需要了解el-select-dropdown的默认样式。这通常可以通过浏览器的开发者工具(DevTools)来完成。在Elements标签页中,找到el-select-dropdown的DOM元素,并查看其应用的CSS样式。 2. 确定需要修改的样式属性 根据你的需求,确定需要修改的样式属性。比如,你可能需要修改背景色、边框、字体颜色等。
1.找到下拉框的类名,写一个全局的样式。 2.通过/deep/来修改.el-select-dropdown__item的样式内容 3.通过popper-class设置的类名添加样式 以上几种方式中,第二种和第三种是无法生效的,而第一种形式虽然可以,但是会造成样式污染,在打包上传到服务器的时候,其他地方的样式可能会因此发生改变。 二:问题分析 上...
::v-deep .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background-color: rgba(12, 90, 207, 0.15); } ::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after { display: none; }
el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item:hover { background-color: #baf; } </style> </head> 效果图如下 但是在index.html文件里面修改样式会造成全局样式污染,假设我只想把这个页面的下拉框的样式修改了,别的页面的下拉框样式不修改,这种方式显然不太好,当然如果是所有...
1、找到下拉框的类名,写个全局样式覆盖掉就行了 2、修改.el-select-dropdown__item的样式 3、通过官网提供的popper-class进行样式修改 然而,上面的方法并没有说到点子上,覆盖全局样式的方法肯定不友好,修改样式和添加类也都不起作用。于是,我看了下下拉框的样式,它并没有在el-select里面,而是放在了最外层,如...
.el-select-dropdown.is-multiple{ .el-select-dropdown__item.selected { color: @primaryColor; background-color: @btnPlainColor; } } 4. button .el-button--primary { color: @btnPlainColor; background-color: @primaryColor; border-color: @primaryColor; &:hover { background: @primaryColor;...
需求是修改el-select中el-option样式,当label长度过长时以省略号显示。 2.思路 通过F12查看DOM树,找到el-option的是.el-select-dropdown__item中的span ,然后为了不污染其他的组件中的样式,利用样式穿透,但结果出乎意料,并没有修改成功。 <el-selectv-model="input"><el-optionlabel="你好呀你好呀你好呀你还...
//修改总体选项的样式 最外层 .car-count-select{ margin: 0px; border:0px; border-radius: 0px; height: 500px; background: cyan ; } //修改单个的选项的样式 /deep/ .el-select-dropdown__item{ /*background-color: transparent;*/ /*color:#fff;*/ } /deep/ .el-select-dropdown { /*bac...
1 个回答 得票最新 NNNNzs 2171020 发布于 2021-06-22 给了自定义popper-class的自定义类就不要卸载scoped里面了,不会有样式污染 <style> .pageclass .el-select-dropdown_item.selected{ color:red } </style> 有用 回复 查看全部 1 个回答 推荐问题 ...
}//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...