Vue项目中自定义ElementUI输入框选择器样式及图标位置详解
本文将指导您如何自定义ElementUI输入框选择器的样式，特别是如何调整图标位置，并确保下拉列表完整展开。
首先，在您的Vue组件的<style></style>标签内，添加以下CSS代码：
<code class="css">/* 调整前置图标区域样式 */
/deep/ .el-input-group__prepend {
background-color: #f5f7fa; /* 设置背景色 */
color: #909399; /* 设置文本颜色 */
vertical-align: middle; /* 垂直居中对齐 */
display: table-cell; /* 使用表格单元格布局 */
position: relative; /* 使用相对定位 */
border: 1px solid #dcdfe6; /* 设置边框 */
border-radius: 50px 0 0 50px; /* 设置圆角 */
padding: 0 5px; /* 设置内边距 */
width: 50px; /* 设置宽度 */
height: 100%; /* 设置高度 */
white-space: nowrap; /* 防止文本换行 */
padding: 5px; /* 调整内边距 */
text-align: center; /* 水平居中对齐 */
}
/* 调整图标样式 */
img {
width: 40px; /* 设置图标宽度 */
height: 40px; /* 设置图标高度 */
}
/* 保证输入框可见 */
/deep/ .el-input__inner {
display: inline-block; /* 使用内联块级元素布局 */
}</code>
这段代码会：
立即学习“前端免费学习笔记（深入）”；
-
调整
.el-input-group__prepend样式: 这部分样式控制选择器前的区域，设置背景色、边框、圆角等，并使用table-cell和text-align: center确保图标居中显示。 -
调整
img样式: 这部分样式调整图标的大小。 - 确保输入框可见: 这部分样式确保输入框不会被其他元素遮挡。
通过以上步骤，您可以有效地控制ElementUI输入框选择器的样式，并精确调整图标位置，确保下拉列表完整展开，从而获得更符合您设计需求的UI效果。 请注意/deep/的使用，这使得样式能够穿透ElementUI组件的封装。
