【Element】调整 el-select 高度之后箭头错位问题解决

原创于 2022-04-11 11:19:00 发布 · 502 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #css #elementui

Element 专栏收录该内容

27 篇文章

订阅专栏

当调整了Element UI的el-select或input组件的高度后，可能会遇到选择框箭头出现错位的情况。为了解决这个问题，可以恢复.el-input__icon的默认高度，并使用相对定位来调整箭头的位置。具体做法包括设置.icon的高度，如40px，然后通过position:relative和top:-7px来实现箭头的居中对齐。这样可以确保在调整组件高度后，箭头依然正确显示。

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

在调整 el-select 或者 input 高度，比如

.el-input__inner {
	width: 272px;
	height: 32px;
	border: 1px solid #e0e0e0 !important;
}

成功之后，el-select箭头错位，情况类似如下图

解决方法

恢复el-input__icon的height原属性，同时借助相对定位完成位置移动。

.el-input__icon {
	height: 40px; // 设置高度，icon元素恢复原来的高度，这时arror才能垂直居中
	position: relative;
	top: -7px; // 元素整体上移，需要自己调整，让箭头也居中
}

参考文章

调整el-select高度之后箭头错位问题解决

【Element】调整 el-select 高度之后 箭头错位问题解决

解决方法

参考文章

【Element】调整 el-select 高度之后箭头错位问题解决