如何在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的select输入字段中看到上/下箭头(如下面的屏幕截图所示,用箭头标记).我不能对HTML代码进行任何更改,因为它来自wordpress 网站的检查.

Answer 1

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

要仅使用CSS来重新选择项目,您需要同时定位select 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)将以不同的方式显示内容,并且您的自定义样式将不匹配.要在所有浏览器和操作系统中实现无缝外观,您需要确保所有选择/输入元素的样式相互匹配.

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 图像。