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

Question

我正在研究 website (基于 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>

这是完整的 fiddle https://jsfiddle.net/ovp8Lxjw/4/embedded/result对于上面的代码。此时，它只有向下箭头。

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

问题陈述:

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

Answer 1

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

要仅使用 CSS 重新设置选择项的样式，您需要同时定位选择项及其父级 p元素。 select 有一个 ID，很容易定位，但针对的是特定的 p仅从您提供的代码来看元素并不容易。然而，查看提供的 Wordpress 站点链接，在 p 之前有一个标签。 , 形式为 <label for="search-box-filter_31">Name of Institution</label> .这意味着 p可以使用 CSS 选择器定位元素 label[for=search-box-filter_31] + 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，将以不同方式显示内容，您的自定义样式将不匹配。要在所有浏览器和操作系统中呈现无缝外观，您需要确保所有选择/输入元素的样式都相互匹配。