el-select 下拉框选中项deep修改样式不生效问题

最新推荐文章于 2024-07-09 09:26:43 发布
最新推荐文章于 2024-07-09 09:26:43 发布
阅读量2.2k 收藏 4
点赞数 2
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NOIFNOIFNOIF/article/details/124016054
版权

默认样式如下

.el-select-dropdown__item.selected {

color: #409EFF;

font-weight: 700;

}

加上/deep/后发现样式未生效

/deep/ .el-select-dropdown__item.selected {

color: #red;

font-weight: 700;

}

解决方法：添加popper-append-to-body属性设置为false，不把弹出框插入至 body 元素

<el-select :popper-append-to-body="false">

效果如下图

打代码的派大星
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式，解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式
王佳斌
03-23 3297
vue3，element-plus，el-select，下拉选择器，下拉选择框，Select选择器，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementPlus选择器如何覆盖hover效果，使用deep改不了样式，修改边框颜色，select去掉边框，vue3+elementPlus中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，
Vue - ElementUI 下拉选择器 el-select 覆盖修改 placeholder样式，详细解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式）
王佳斌
03-23 3147
vue，vue2，element-ui，el-select，下拉选择器，下拉选择框，Select选择器，修改边框颜色，select去掉边框，vue2+element中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，select弹出样式修改，修改下拉框el-select的样式，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementUI
修改el-select组件 el-select-dropdown__wrap样式不生效问题及解决
qq_42908317的博客
12-24 3818
修改el-select组件 el-select-dropdown__wrap样式不生效问题及解决 最近项目中用到了树结构的下拉框 写好以后发现 el-select-dropdown__wrap 哪怕使用深度选择器也修改不了，经过查找各种资料 最后发现渲染后的dom元素就不在#app元素内部 知道问题以后就好解决了 el-select 上加上 :popper-append-to-body=“false” 属性用于将渲染后的元素放入#app元素 这时候在使用深度选择器就可以了 ...
修改el-dropdown下拉框的样式，没有效果，所以将el-dropdown的html片段写在当前所在的div里面，而不是body里
flyaway0624的博客
04-25 2682
1.项目中遇到点击页面中其他的地方关闭窗口，但是遇到一个问题el-dropdown元素是写在body里面 2.因此点击el-dropdown的下拉框时窗口就关闭了 所以我们需要把它写在窗口的div里面，在这里用到一个方法 <template> <div> <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i clas
antd a-select下拉框样式修改 vue3 亲测有效
最新发布
qq_54548545的博客
07-09 880
antd a-select下拉框样式修改 vue3 亲测有效
el-form中el-select-dropdown样式不生效的问题
han_xiao_xiao的博客
05-06 374
【代码】el-form中el-select-dropdown样式不生效的问题。
解决 /deep/ .el-select-dropdown{ }样式不生效的问题
night43的博客
04-15 5118
修改el-select样式时，发现 /deep/ .class名{background:#00f !important;}不生效的问题...
修改elementUI el-select 下拉框修改样式不生效问题
fred8的博客
01-05 1163
修改elementUI el-select 下拉框修改样式不生效问题
el-dropdown绑定click点击事件不生效和样式修改
x_XDGS的博客
04-08 2696
el-dropdown绑定click点击事件不生效和样式修改 我们在开发项目的时候会用到el-dropdown，这个功能一般都会在用户上进行使用 比如： 修改密码，退出的情况下 绑定点击事件 组件直接绑定点击事件是不生效的，需要通过 @click.native=‘logout’ 这种方式来进行绑定点击事件。 修改样式 先看图： 这个组件的DOM不在#app里面，和#app是同级关系。 如果我们要修改组件样式的话，我们就不能再style上加scoped，必须全局修改，这样就会出现一个情况：我们在其他地方使
ElementUI Select选择器下拉框样式修改
丑小鸭变黑天鹅的博客
10-12 7644
工业互联网平台前端代码说明 一、结构说明 build目录 —> 代码最终打包编译生成的文件都放在这个文件夹里 public目录 —> 整个项目的入口index.html和title图标，始终不用动这个文件夹 src目录 —>整个项目的核心代码都在这里 1、api文件夹 —> 请求后台数据的js文件夹，项目已经封装好axios，用的时候直接按照给的示例用就可以了。命名的时候按照规范，最好和你组件名一致。 2、assets文件夹 —>放着一些静态资源文件，如图片
vue-cli3-element-ui select选择器，popover弹出框修改默认样式
郝峰vip的博客
12-25 1313
前言 在项目中遇到的问题，修改selecet选择器，popover弹出框的样式时失效，在这里记录录一下，方便以后使用。 第一步：官方文档中的popper-class <el-select v-model="couponIdCopy" placeholder=" " @change="changeCoupon" class="change-coupon-select" popper-class="C
el-select在火狐浏览器闪一下问题
07-27
根据引用\[1\]和引用\[2\]的内容，解决el-select在火狐浏览器闪一下的问题可以尝试以下方法。首先，在CSS中添加以下代码来修改样式： ```css .el-select-dropdown .el-scrollbar .el-scrollbar__wrap { overflow: ...
antdesign of vue关于a-select下拉框选择不生效问题
DENGHANJIE123的博客
09-02 6590
antdesign of vue关于a-select下拉框选择不生效问题
elementplus 中 select 选择器下拉框样式无法修改问题
jiangjunyuan168的博客
01-24 1749
遇到需要修改 elementplus 中下拉框 el-select 样式的需求，但是发现在添加了 scoped 属性的 style 标签，并且使用了 deep 样式穿透的情况下并不能修改其样式。
el-select 下拉框内样式deep修改样式不生效问题
Half of if的博客
03-13 1196
el-select 下拉框选中项deep修改样式不生效问题
解决ant-design-vue 组件在vue3项目中改默认样式始终不生效
wffgwjj的博客
12-18 1082
在写项目时遇到 ant-design-vue组件样式始终改不了 ，在网上查了很多方法最终 在index.html文件中写的样式最终生效。
ant-design-vue 设置 dropdownClassName 无效问题
Lxb_Thunder的博客
11-29 1541
后来发现 style-select-drowdown 根本不在那个组件下面，也就是组件在 app 下，下拉框和 app 同级，所以 deep 就无效，根本不是穿透的问题。由于设置了 scoped，所以一开始认为加个 :deep 应该可以，但是试了发现也没用。最后换成 global 的就成功修改样式了。发现是成功插入 class 的。
el-select-dropdown 修改下拉框的样式
zkx529的博客
05-15 6891
问题描述 使用el-select的时候有时候需要修改下拉框的样式，但是el-select-dropdown必须添加类名才能修改他的样式。 问题解决 1.popper-class="" element提供了为下拉框绑定类名的api，绑定类名之后使用 deep深度遍历器或者不适用scope即可修改样式，但是popper-class=""需要搭配 :popper-append-to-body="false" 使用。 用(深度)选择器设置属性不生效的原因（不搭配:popper-append-to-body=
elementUi【 下拉框】样式修改无效或者无法修改？
༺隆冬飘落の初霁༻的博客
11-16 1681
先提前做个demo <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue 下拉框</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> <script src="https://unpkg
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值