如何在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>

以下是需要翻译的内容：

这里是完整的fiddlehttps://jsfiddle.net/ovp8Lxjw/4/embedded/result，与上文代码相符。目前，它只有向下箭头。

在上述fiddle中，我想添加蓝色的上/下箭头。目前，它只显示向下箭头。

问题陈述：

我想知道在上述fiddle中需要添加什么CSS代码，以便在css中的选择输入字段中看到上/下箭头（如下面的屏幕截图所示，由箭头标记）。 我不能更改HTML代码，因为它来自于wordpress 网站的检查。

- john

---

这篇文章可以帮助你：https://dev59.com/pWYq5IYBdhLWcg3wxTSq - Vash72

@Francesco Fortin并没有太大帮助。我需要在CSS中使选择输入字段中的上/下箭头都出现。上面的问题只有一个向下箭头。 - john

你发布的截图来自OSX，你想让其他操作系统（如Windows）也显示相同的上/下箭头？@FrancescoFortin 的回答看起来是正确的，但你需要提供你的图片才能在其中添加上下箭头。 - Clay

Answer 1

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

要仅使用CSS重新设计选择项，您需要同时定位选择和其父级p元素。选择具有ID，很容易定位，但仅从提供的代码来看，定位特定的p元素并不容易。但是，查看提供的WordPress网站链接，只需在p之前有一个标签，形式为机构名称。这意味着可以使用CSS选择器label[for=search-box-filter_31]+p来定位p元素。

首先需要确保有足够的空间容纳新箭头。为此，需要将选择框的宽度增加新箭头的宽度，并在父级 p 的右侧填充中添加相同数量的宽度。使用 calc(100% + 30px) 可以改变选择框的宽度。如果新箭头与默认图标具有相同的宽度，则可能不需要这样做，但在某些配置中，新箭头可能会重叠选择框的内容。

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

最后，您可以在 p 上使用 ::after 伪元素来创建所需的箭头，并将其覆盖在选择元素的末尾，隐藏默认箭头。在下面的示例中，我使用内联 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

Answer 2

这是一个简单直接的例子，使用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

---

检查中。敬请关注。 - john

@john 我认为你不会有问题。如果不是全部，它在大多数浏览器上看起来都一样。它已经在Edge、FF、Opera和Chrome（Win桌面版）上进行了检查。 - user2560539

我已经接受了你的答案，并且认为它有效。我也授予了赏金。我还有一个类似的问题（链接在这里：https://dev59.com/N67la4cB1Zd3GeqPlOsA#52685274?noredirect=1#comment92299928_52685274）。我想知道你是否能看一下。这与 WordPress 插件 CSS 相关，我已经被卡了24小时了。 - john

Answer 3

有一种纯CSS/HTML的解决方案，但是需要通过hack来实现。我们可以通过设置html size="2"来扩展高度，然后再通过height来缩小高度。

<p>
   <select name="filter_31" id="search-box-filter_31" size="2" style="font-size:16px; height:24px;">
      <option value="Vancouver Island University">University of Arizona</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>

但是我不会为一个工作项目编写这样的代码，最好使用JS库，例如：https://github.hubspot.com/select/docs/welcome/。

- nektobit

---

我无法在HTML代码中进行任何更改，因为这些都是在进行检查后从WordPress中获取的。我唯一可以进行更改的地方就是CSS。我想知道您是否了解可以解决此问题的CSS。 - john

这个任务仅使用CSS无法解决。你无论如何都需要JavaScript。只使用CSS解决此问题的任何解决方案都会在不同的浏览器和操作系统中引起问题。 - nektobit

首先让我们决定一下，您只需要右侧带有向上和向下箭头的图标，以便在单击箭头时出现下拉菜单吗？还是您需要这些箭头成为完全成熟的工具，即这两个箭头具有不同的行为？如果您能在网上找到所需功能的工作示例，最好将其添加到您的问题中。 - nektobit

你的第一个观点我能理解。我需要一个右侧带有蓝色向上和向下箭头的图标，当我们点击箭头时应该出现一个下拉菜单。 - john

Answer 4

也许这会让你感到安慰，因为你说你不能触碰HTML。我在玩CSS！

#search-box-filter_32 {
            background-color: white !important;
            font-size: 11px !important;
            background: url('https://cdn3.iconfinder.com/data/icons/trico-arrows-1/24/ExpandUpDownSmall-512.png') no-repeat right #ddd;
            background-position: 98%;
            padding: 2px 20px 2px 8px;
            padding-right: 20px;
            background-size: 14px;
            -moz-appearance: none;
            -o-appearance: none;
            -ms-appearance: none;
            -webkit-appearance: none;
            outline: none !important;
            -webkit-border-radius: 4px;
            border: 1px  solid #cccccc;
        }

https://codepen.io/mohan-wijesena/pen/dgMBLY

- Mohan Wijesena

Answer 5

我会在 p 元素上使用 after: 选择器。

p:after{
content: url("path/to/image");
} 

- Dhul Wells

---

我们的选择有限，因为我们无法更改HTML。唯一剩下的选择是CSS。 - john

我发布的示例是CSS。 - Dhul Wells

是的，我知道。我只是在说而已。 - john

你正在使用箭头的图像，对吗？这对你来说肯定会起作用。 - Dhul Wells

这些都是来自WordPress表单的内容。我没有使用任何其他的东西。 - john