如何在 CSS 的选择输入字段中制作向上/向下箭头？

Question

我正在一个 网站 上工作（ 基于 Wordpress，自定义主题），我想 在 CSS 的选择输入字段中添加向上/向下箭头。我用来为选择输入字段创建向上/向下箭头的 HTML 代码是：

 <p>
   <select name="filter_31" id="search-box-filter_31">
      <option value="Vancouver Island University">University of A</option>
      <option value="Western University">University of B</option>
      <option value="Wilfrid Laurier University">University of C</option>
      <option value="York University">University of D</option>
   </select>
</p>

这是上述代码的完整小提琴 https://jsfiddle.net/ovp8Lxjw/4/embedded/result 。此时，它只有向下箭头。

在上面的小提琴中，我想添加蓝色的向上/向下箭头。此时，它只显示向下箭头。

问题陈述：

我想知道我需要在上面的小提琴中添加什么 CSS 代码，以便我可以在 css 的选择输入字段中看到 向上/向下箭头（ 如下面的屏幕截图所示，用箭头标记）。我无法对 HTML 代码进行任何更改，因为它来自 wordpress 网站 的检查。

原文由 john 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个简单直接的示例，使用 base64 编码的 Font Awesome 图标作为选择框的背景图像。

 select {
  background-color: white;
  border: thin solid grey;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}
select.arrows {
  background-image:    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA3klEQVRIS+3VMU9CMRTF8d8zBL+aizoQFhx0kUk33RzdYMNFXUFnYeGrYYyaJiUxJHDLSxodbNKpfeffc9/pbaPyaCrr+3OA++z4rtT5Pg5GuMnCY9yWQEoBE1xhlUUP8YDrCBIB0vojLvGO0yz4hm4JJAKcYYoPHGOZAUdYoIMBXrc5iQAHeMlzviFygj7O8dkWEJU4XI8chALRhn9AVKHf70VRTHu4wFfbmKZLNKt50dLBnna0imcMd/2I0phWa3Y/D1e1Xa9BCZJG0VuQNpaWKMx72xS1Fl5/WN3BN+AgJhnZQlq4AAAAAElFTkSuQmCC');
  background-position: calc(100% - .5rem), 100% 0;
  background-size:  1.5em 1.5em;
  background-repeat: no-repeat;
}

select.arrows:focus {
  border-color: blue;
  outline: 0;
}

 <p>
  <select class="arrows">
      <option value="Vancouver Island University">Vancouver Island University</option>
      <option value="Western University">Western University</option>
      <option value="Wilfrid Laurier University">Wilfrid Laurier University</option>
      <option value="York University">York University</option>
   </select>
</p>

您可以在 jsFiddle 中查看

另外还有一个指向 Icomoon App 的 链接，用于创建所用图标的 png 图像。

原文由 user2560539 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

默认选择箭头图标由浏览器绘制。没有 API 可让您告诉浏览器替换箭头图标，因此您需要重新设置 select 元素的样式并覆盖您自己的箭头。您可以自己绘制与浏览器箭头具有相同样式的箭头，但请记住，其他浏览器和操作系统的默认图标会有所不同。

要仅使用 CSS 重新设置选择项的样式，您需要同时定位选择项及其父元素 p 元素。 select 有一个 ID，它很容易定位，但仅通过您提供的代码定位特定的 p 元素并不容易。但是，查看提供的 Wordpress 站点链接，在 p 之前有一个标签，格式为 <label for="search-box-filter_31">Name of Institution</label> 。这意味着可以使用 CSS 选择器 label[for=search-box-filter_31] + p p 元素。

您首先需要确保您有足够的空间放置新箭头。这是通过将选择的宽度增加新箭头的宽度，并将相同的量添加到父项 p 的右填充来实现的。更改选择宽度的一种方法是使用 calc(100% + 30px) 。如果您的新箭头与默认图标的宽度相同，您可能不需要这样做，但在某些配置中，您的箭头可能会与选择的内容重叠。

此外， p 元素必须收缩以适应其内容。有几种方法可以做到这一点，但在您的情况下，最不可能破坏格式的方法是设置 display: table 。

最后，您可以使用 ::after 伪元素 p 创建所需的箭头，并将其覆盖在选择元素的末尾，隐藏默认箭头。在下面的示例中，我使用内联 SVG 创建了箭头，但您可以使用最适合您情况的任何背景图像。将 ::after 元素设置为 position:absolute 并将其设置为恰好适合选择的右侧。要在图像中的箭头下方创建蓝色渐变背景，请使用多个背景，第一个是您的箭头，第二个是 CSS 渐变。

请注意，由于 ::after 元素位于选择的顶部，因此单击箭头将不会显示选项。您可以设置 pointer-events: none; 传递点击，但这在 IE 上不起作用。

CSS 在下面，或者你可以在 codepen 上看到它 https://codepen.io/jla-/pen/ZqbWMj

 #search-box-filter_31 {
    width: calc(100% + 30px);
}
label[for=search-box-filter_31] + p {
    position: relative;
    display: table;
    border-radius: 5px;
    padding-right: 30px;
}
label[for=search-box-filter_31] + p::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 30px;
    border-radius: 0 5px 5px 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><polyline points='8,12,15,8,22,12' fill='none' style='stroke:white;stroke-width:2'/><polyline points='8,18,15,22,22,18' fill='none' style='stroke:white;stroke-width:2'/></svg>"),
        linear-gradient(to bottom, #a0d8ff 0%, #2591dd 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

结果（后跟在 Linux 上的 Firefox 中显示的默认选择）：

当然，箭头及其蓝色背景可以按照您希望的任何其他方式设置样式。请注意，为选择箭头添加自定义样式会使其看起来与默认浏览器样式不同。您可以将它的样式设置为无缝地适应一种浏览器，例如 Chrome，但另一种浏览器（例如 Firefox）的显示方式会有所不同，您的自定义样式将不匹配。要在所有浏览器和操作系统中呈现无缝外观，您需要确保所有选择/输入元素的样式都相互匹配。

原文由 jla 发布，翻译遵循 CC BY-SA 4.0 许可协议