解决El-Select图标及文本样式自定义的痛点：巧用CSS打造个性化选择框

自定义 ElementUI el-select 组件：打造个性化下拉框

ElementUI，一款广受欢迎的前端UI框架，为开发人员提供了丰富的组件库，极大地简化了Web开发过程。其中，el-select 组件是一个允许用户从一系列选项中选择一个或多个值的控件。然而，其自带的下拉图标和文本样式可能无法满足所有项目的个性化需求。

本指南将通过 CSS 自定义功能，详细讲解如何更改 el-select 的自带下拉图标为倒三角形，并设置相关的文本颜色和大小。

步骤指南

1. CSS 代码

在你的 CSS 文件中粘贴以下代码：

/* 更改下拉图标为倒三角形 */
.el-select__caret.el-input__icon {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSIgPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1Jbi4gU3NsY2thcCBGb250cyAtIDIgUFNaIDIuMCAzMy4wNTk1ODMwLCBJdGVybyA1LjcgMjAxNC4wMy4wMyAtLSAtIENyZWF0ZWQgYnkgSW5rYW5kZSAtLT4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdmlld0JveD0iMCAwIDIwIDIwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMCAyMDsiIHhtbDpzcGFjZTp4YWxpbjpsZXZlbD0iaXNvbGF0aW9uIj4NCjxyZWN0IHg9IjE0LjA1NSIgeT0iNC45NDQiIGZpbGw9IiMwMDAwMDAiIHdpZHRoPSIxLjU5NiIgaGVpZ2h0PSI2LjU2MSIvPg0KPHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgY2xpcC1wYXRoPSJNMjAuMTU2LDkuMDg0bC02LjM2NCw2LjM2NEwtMy42MzYsOS4wODRsNi4zNjQsNi4zNjRjMC43ODksMC43ODksMS44MzcsMC43ODksMi42MjYsMGw2LjM2NC02LjM2NEMyMS4wMTQsOS44NzMsMjAuOTQ1LDkuODczLDIwLjE1Niw5LjA4NHoiLz4NCjwvc3ZnPg0K") !important;
  transform: rotate(180deg) !important;
}

/* 设置文本颜色 */
.el-select .el-input__inner {
  color: #333 !important;
}

/* 设置文本大小 */
.el-select .el-input__inner {
  font-size: 14px !important;
}

2. 保存并刷新

保存 CSS 文件并刷新 Web 页面。

预览效果

完成以上步骤后，你将看到 el-select 组件的下拉图标已成功替换为倒三角形，文本颜色变为黑色，文本大小调整为 14 像素。

优势

自定义 el-select 组件的好处包括：

• 个性化设计： 你可以根据项目的特定需求和审美偏好定制下拉图标和文本样式。
• 提高可用性： 倒三角形下拉图标更符合用户对下拉控件的传统认知，从而提高可用性。
• 品牌一致性： 你可以调整组件的外观以匹配网站或应用程序的整体品牌形象。

常见问题解答

1. 如何使用其他图标替换下拉图标？

你可以使用 base64 编码的 SVG 或 PNG 图标替换下拉图标。只需修改 CSS 代码中的 background-image 属性即可。

2. 如何设置文本颜色为其他值？

只需修改 CSS 代码中的 color 属性即可。例如，要将文本颜色设置为蓝色，你可以使用以下代码：

.el-select .el-input__inner {
  color: #0000ff !important;
}

3. 如何调整文本大小？

只需修改 CSS 代码中的 font-size 属性即可。例如，要将文本大小设置为 16 像素，你可以使用以下代码：

.el-select .el-input__inner {
  font-size: 16px !important;
}

4. 如何重置组件为默认样式？

要重置组件为默认样式，只需删除添加到 CSS 文件中的自定义代码即可。

5. 如何仅在某些页面上应用这些自定义设置？

你可以使用 CSS 选择器限制自定义样式仅应用于特定页面。例如，要仅在带有 about 类的页面上应用自定义设置，你可以使用以下代码：

.about .el-select__caret.el-input__icon {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSIgPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1Jbi4gU3NsY2thcCBGb250cyAtIDIgUFNaIDIuMCAzMy4wNTk1ODMwLCBJdGVybyA1LjcgMjAxNC4wMy4wMyAtLSAtIENyZWF0ZWQgYnkgSW5rYW5kZSAtLT4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdmlld0JveD0iMCAwIDIwIDIwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMCAyMDsiIHhtbDpzcGFjZTp4YWxpbjpsZXZlbD0iaXNvbGF0aW9uIj4NCjxyZWN0IHg9IjE0LjA1NSIgeT0iNC45NDQiIGZpbGw9IiMwMDAwMDAiIHdpZHRoPSIxLjU5NiIgaGVpZ2h0PSI2LjU2MSIvPg0KPHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgY2xpcC1wYXRoPSJNMjAuMTU2LDkuMDg0bC02LjM2NCw2LjM2NEwtMy42MzYsOS4wODRsNi4zNjQsNi4zNjRjMC43ODksMC43ODksMS44MzcsMC43ODksMi42MjYsMGw2LjM2NC02LjM2NEMyMS4wMTQsOS44NzMsMjAuOTQ1LDkuODczLDIwLjE1Niw5LjA4NHoiLz4NCjwvc3ZnPg0K") !important;
  transform: rotate(180deg) !important;
}