自定义Element UI输入框选择器样式及图标居中显示
本文介绍如何在Vue.js项目中，修改Element UI的el-select组件样式，实现选择器居中显示，并添加自定义图标。
Element UI的el-select组件默认样式导致选择器靠左显示。为了将其居中并添加图标，我们需要进行以下步骤：
-
调整
el-select样式，使选择器位于右侧：立即学习“前端免费学习笔记（深入）”；
在你的样式表中添加以下CSS代码：
/deep/ .el-input-group__prepend { right: 0; left: auto; }这行代码会将
el-input-group__prepend类（包含选择器图标的元素）的定位方式修改为从右侧开始，从而使选择器移至输入框右侧。 -
使用
prepend插槽添加图标：在你的Vue组件中，使用
prepend插槽在el-select组件内添加图标：@@##@@ 这将把图标放置在选择器的左侧。 由于步骤1已将选择器移至右侧，图标最终会居中显示。
-
(可选) 隐藏默认输入框：
如果希望只使用图标来触发选择器，并隐藏默认的输入框文本，可以添加以下CSS代码：
/deep/ .el-input__inner { display: none; }
通过以上步骤，即可实现Element UI输入框选择器样式的自定义，并使图标居中显示。 记住替换../assets/baidu.png为你实际的图标路径。
