} ::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; }
有网友说,popper-append-to-body要搭配popper-class一块使用,其实并不一定需要搭配使用,只要让对应元素加入到el-select结构中去,就可以直接修改对应样式了。poper-class的用法这样使用:<el-select v-model="value" popper-class="setSelect" :popper-append-to-body="false" placeholder="请选择"></el-select> ...
}//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...
1、找到下拉框的类名,写个全局样式覆盖掉就行了 2、修改.el-select-dropdown__item的样式 3、通过官网提供的popper-class进行样式修改 然而,上面的方法并没有说到点子上,覆盖全局样式的方法肯定不友好,修改样式和添加类也都不起作用。于是,我看了下下拉框的样式,它并没有在el-select里面,而是放在了最外层,如...
首先,你需要了解el-select-dropdown的默认样式。这通常可以通过浏览器的开发者工具(DevTools)来完成。在Elements标签页中,找到el-select-dropdown的DOM元素,并查看其应用的CSS样式。 2. 确定需要修改的样式属性 根据你的需求,确定需要修改的样式属性。比如,你可能需要修改背景色、边框、字体颜色等。
对于el-select弹出来的下拉框, 单纯进行样式穿透是没办法进行修改的, 因为这个下拉选择的框不在body元素里,需要加一句: popper-append-to-body=”false“ 这一句的好处就是把下拉选择框放在body里,可以进行样式穿透。 ::v-deep .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{ ...
// 修改选择课程名样式changeLessonName(){constreopenStatus=this.activeLesson.reopenStatus;// el-select的class名constparent=document.getElementsByClassName('lesson-select')[0].childNodes[1];constisSpan=parent.childNodes[1].nodeName;if(reopenStatus&&reopenStatus!==0){let dom;// 有无span节点if(isSpa...
需求是修改el-select中el-option样式,当label长度过长时以省略号显示。 2.思路 通过F12查看DOM树,找到el-option的是.el-select-dropdown__item中的span ,然后为了不污染其他的组件中的样式,利用样式穿透,但结果出乎意料,并没有修改成功。 <el-selectv-model="input"><el-optionlabel="你好呀你好呀你好呀你还...
1 个回答 得票最新 NNNNzs 2171020 发布于 2021-06-22 给了自定义popper-class的自定义类就不要卸载scoped里面了,不会有样式污染 <style> .pageclass .el-select-dropdown_item.selected{ color:red } </style> 有用 回复 查看全部 1 个回答 推荐问题 ...
popper-append-to-body: 此属性是用来判断是否将弹出框(options)插入值body元素中,接受一个布尔值,默认值为true 当需要修改其样式时,可将其属性值设置为false https://blog.csdn.net/qq_43432158/article/details/122497039 //选择下拉框//option最外层.el-select-dropdown { ...