如何更改 CSS 中的选择箭头

在 HTML 表单中，选择箭头（也称为下拉箭头）是用来显示下拉菜单的常用组件。在默认情况下，这些选择箭头在各种设备和浏览器中看起来都相同，但是你可以使用 CSS 将它们更改成自己的样式。

1. CSS Content 属性

CSS Content 属性可以用来指定选择箭头的外观。默认情况下，选择箭头是由字体图标或操作系统提供的，所以我们需要使用伪元素来添加自定义样式。

以下是一个示例，展示了如何使用 Content 属性添加自定义箭头样式：

select {
  appearance: none;
  background: url("dropdown-arrow.png") no-repeat right center / auto 100%; /* 使用自定义箭头 */
  padding-right: 20px; /* 增加样式使箭头与下拉列表之间有足够的间距 */
}

/* 伪元素，添加自定义箭头 */
select::-ms-expand {
  display: none;
}

select::after {
  content: "▼";
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

解释

appearance: none;：指定 select 元素不显示默认的箭头。

background: url("dropdown-arrow.png") no-repeat right center / auto 100%;：设置自定义箭头作为选择器的背景图像，同时还可设置背景位置、大小等。

padding-right: 20px;：可以增加一个填充值，以使箭头与下拉列表之间有足够的间距。

select::-ms-expand { display: none; }：为了避免 Microsoft Edge 浏览器默认箭头的干扰，我们使用以下 CSS 规则：

select::after { ... }：使用伪元素 ::after 来为 select 元素添加自定义箭头。

content: "▼";：使用 Content 属性添加箭头样式，可以将任何 Unicode 字符添加到元素的内容中。

font-size: 12px;：设定字体大小。

font-weight: bold;：设定字体加粗。

right: 6px;：将箭头右对齐。

top: 50%;：将箭头垂直居中。

transform: translateY(-50%);：为了使箭头在垂直方向上居中，我们可以使用 transform 属性的 translateY() 函数。

2. CSS Border 属性

CSS Border 属性是另一种更改选择箭头样式的方法。可以使用 border-style 和 border-color 属性来定义具有箭头形状的边框，然后使用 transform 属性来旋转箭头，并在需要时平移它。

以下是一个示例，展示了如何使用 Border 属性添加自定义箭头样式：

select {
  appearance: none;
  padding: 7px 45px 7px 10px;
  border: none;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  font-size: 16px;
  width: 200px;
  height: 30px;
  background: white url("arrow.png") no-repeat right center;
  background-size: 30px 30px;
}

select option {
  padding-left: 15px;
  background: #f0f0f0;
}

select option:first-child {
  color: #999;
}

select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 8px;
  border-color: #000 transparent transparent transparent;
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

解释

此示例使用两个不同的图像来创建自定义下拉菜单样式。arrow.png 图像作为箭头图像，我们将其设置为，位于下拉列表右侧上面一点，而不是取代原本彩色的数组图像：

background: white url("arrow.png") no-repeat right center;
background-size: 30px 30px;

使用 Border 属性创建三角形箭头。箭头是使用 Border 剪片创建的：

select::after {
  border-style: solid;
  border-width: 10px 8px 0 8px;
}

其中：

• border-style：指定边框样式为 solid。
• border-width：这里的值指定了边框的宽度，第一个零表示顶部没有边框，后面两个都设置为 8px，表示左右两边要有边框，而且必须大于或等于 border-top-width。
• border-color：填充颜色，这里使用 transparent 填充，以使箭头的显示更符合我们的需求。

默认情况下，箭头的位置可能是不正确的。通过旋转和平移可以调整箭头的位置：

transform: rotate(180deg);
transform-origin: 50% 50%;

其中 transform: rotate(180deg); 将箭头旋转了 180 度，transform-origin: 50% 50%; 使变换基点位于箭头的中心点。

结论

通过使用以上 CSS 规则，你可以上下自定义选择器的样式，可以根据你的需求添加任何颜色、形状、边框样式等。