关于el-select的小三角margin失效

最新推荐文章于 2025-03-15 15:06:25 发布
最新推荐文章于 2025-03-15 15:06:25 发布
阅读量388 收藏
点赞数
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_59029117/article/details/131900536
版权
在调整el-select组件的样式时，遇到了下拉框和小三角错位的问题。通过设置popper-append-to-body和popper-class解决了下拉框错位，但小三角的margin-left无法向右移动。发现需使用margin-right才能正确调整小三角的位置，实现了样式的整体修复。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 为了布局修改了el-select中el-input__inner的margin-left为20px

 此时页面布局呈现如下错乱样式

 

 

1：解决下拉框错位

此时该下拉框的dom元素在页面最外层如下所示

通过设置popper-append-to-body="false"和popper-class="popperClass"为下拉框设置class后修改样式

 

 下拉框样式已修复如下

2：解决小三角错位

该三角元素如图所示

想当然的设置了margin-left 

 

没想到竟然不生效

调试发现该三角可以向左移动，却无法通过设置margin-left向右移动

 将margin-left换成margin-right后却正常生效，三角可以左右移动至任意位置

 

ps:一个一个改搞复杂了，直接改select框的样式就可以一键全改(包括下拉框、小三角) 

 

 

 

 

 

 

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导
特创数字
01-11 1364
设置scale样式属性实现涟漪动画，先使用定位确定元素的位置，确定坐标后创建多个组件实现重合效果，再设置opacity属性改变组件不透明度实现组件隐藏与显示，同时设置scale值使组件可以一边放大一边隐藏，最后设置两个组件不同的动画执行时间，实现扩散的效果。通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3434
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
element-UI tree树形控件 修改小三角图标
whylost
05-13 8226
el-tree 默认样式 可以看到有下级没展开是▸ 有下级展开了是▾ 没有下级的前面什么符号也没有。 更改成自定义样式 因为是vue的 <style scoped>内写CSS 样式，所以需要添加 /deep/ 进行穿透 .el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } //有子节点 且未展开 .e
element ui 下拉框Select 选择器 上下箭头旋转方向样式错乱——＞优化方案
DecorateCC的博客
05-24 1111
测试A：那啥！抠图仔，样式怎么点着点着就出问题了。前端：啥？css样式错乱了？你是不是有缓存啊！清下缓存试试。测试A（内心戏：这抠图仔一有问题就赖缓存）：清缓存后，还有啊！你看看吧！前端：见鬼了，我本地没复现啊。希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
Select 选择器选项位置偏移的解决方案
最新发布
翱翔-蓝天
03-15 652
在使用Select组件时，可能会遇到下拉选项位置偏移的问题。这通常由CSS样式、组件渲染方式或父级元素的影响造成。以下是详细的排查步骤和解决方案。absoluteSelectdropdownSelectdropdowndropdownUIdropdownbodydivpositionSelectSelectModalDrawerz-index父级遮挡。
处理 el-select 下拉列表产生位置不准确，打开下拉列表后滚动页面列表会异常偏移的问题
m0_52211521的博客
07-22 1624
我就对比了一下element-ui官网针对vue2/vue3的el-select参数描述发现，针对vue3实行的下拉框参数中并不沿用popper-append-to-body字段来控制是否将组件加入body，而是用teleported控制，于是尝试加了:teleported="false"，结果发现成功了。结论：在el-select标签内加入:popper-append-to-body="false"或者:teleported="false"即可解决。
ElementUI 去掉el-select下拉框的小三角图案
weixin_44443380的博客
01-16 2153
（1）表单： popper-class="selectMenuOption" :popper-append-to-body="false"
修改element-ui树状结构小三角图标
m0_37378152的博客
10-18 5069
1.查看版本有没有支持icon-class，可以用这个属性修改，但是无论展不展开只有这一种样子，一般都想用2种区分。 2.用element-ui icon 库里的图标，修改content，可以打开浏览器定位到图标查看 .el-tree .el-tree-node__expand-icon.expanded // 取消旋转 { -webkit-transform: rota...
3万字总结 HTML + CSS，还不赶紧学起来✔️
qq_43477721的博客
10-06 631
HMTL + CSS 1. DIV+CSS布局的好处 代码精简，且结构与样式分离，易于维护 代码量减少，减少了大量的带宽，页面加载更快，提升了用户的体验 对SEO搜索引擎更加友好，H5新增了许多语义化标签 允许更多炫酷的页面效果，丰富了页面 符合W3C标准，保证网站不会因为网络应用的升级而被淘汰 缺点: 不同浏览器对web标准默认值不同，所以更容易出现对浏览器的兼容性问题。 2. HTML 标签语义化 2.1 HTML语义化背景介绍 HTML结构语义化，是最近几年才提出来的，以前的html结构，一打开.
前端面试题—中级
1234Wu--前端Blog
02-16 4295
目录一、JS部分：1.原型链2.闭包3.手写Promise4.数据类型判断5.Map和Set6.垃圾回收机制7.安全随机数8.贪心算法9.js循环10.数组新方法二、HTML部分三、Css部分1.垂直居中2.弹性布局3.grid布局四、浏览器部分五、Vue部分1.$nextTick2.$set3.取消请求4.vue3.0新特性5.vue新指令 一、JS部分： 1.原型链 2.闭包 3.手写Promise 4.数据类型判断 typeof：返回7种数据类型:number,str
React中如何解决点击＜Tree＞节点前面三角区域不触发onClick事件
weixin_44582077的博客
11-23 935
React中如何解决点击节点前面三角区域不触发onClick事件，如何区别‘左边’和‘右边’区域点击逻辑呢？（Tree引用开源组件TDesign）提示：nodeAnde参数包括节点内容和event事件详情。
el-tree 只有点击三角图标才会触发展开
qq_59224836的博客
07-07 1174
el-tree 只有点击三角图标才会触发展开
el-select 远程搜索时 没有箭头图标如果需求说需要加上图标的话
weixin_43196880的博客
02-23 1096
select 支持远程搜索如何显示下拉icon
element的select组件下拉框位置偏移
小破船借箭的博客
09-15 9026
欢迎大佬光临，望大佬批评指正，不喜就喷，共同进步，谢谢！ 项目弱弱的说一句：如果对您有帮助还望大佬点赞哦。 一. 为什么会出现这样的问题？（比较赶的大佬请下拉至二直接看解决方案） 请看下图解析 上述图片解析： 1.红色框为select区域 2.主题内容的类（css样式） 设置了 margin-top：60px（在这里我们先怀疑是这个属性造成的影响）； 根据上述两图比较得出答案： 去掉==margin-top：60px==属性，select组件恢复正常。 由上述得出答案： 因为se
el-dropdown下拉菜单样式修改,去掉小三角
song_song0927的博客
07-15 8621
el-dropdown下拉菜单默认样式的修改,去掉下拉菜单的小三角
Vue 3.0 + Element Plus 下拉框表格组件
小李小李天下无敌
11-15 2687
Vue 3.0 + Element Plus 下拉框表格组件
el-select 下拉框样式的更改(备忘录)
weixin_45608414的博客
03-01 952
el-select 下拉框设置样式
(Select)解决：Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)
热门推荐
狮子座的男孩
05-05 3万+
Ⅰ、Element-ui 提供的组件与想要目标对比： 1、Element-ui 提供组件情况： 2、想要修改后的目标： Ⅱ、Ⅲ、ⅣⅤ1、目标：
ElementUI组件el-select与el-tree融合技巧
资源摘要信息:"el-select-tree是ElementUI的el-select与el-tree组件的结合体，它提供了一种在Vue项目中使用树形结构数据进行选择的新方式。以下为el-select-tree相关的知识点详细说明。 一、ElementUI的el-select与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

又是江滨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值