Question

我正在研究website（建立在Wordpress上，自定义主题），我想在其中的上/下箭头在CSS的选择输入字段中添加。我用来为选择输入字段创建上/下箭头的HTML代码是：

getopt

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

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

问题陈述：

我想知道我需要在上面的小提琴中添加哪些CSS代码，以便可以看到上/下箭头（，如下面的屏幕快照所示，用箭头标记website的检查。

Answer 1

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

要仅使用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伪元素来创建所需的箭头，并将其覆盖在select元素的末尾，以隐藏默认箭头。在下面的示例中，我使用嵌入式SVG创建了箭头，但是您可以使用最适合您情况的任何背景图像。将::after元素设置为具有position:absolute并设置其样式以使其恰好位于所选内容的右侧。要在图像中的箭头下创建蓝色渐变背景，请使用多个背景，第一个是箭头，第二个是CSS渐变。

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

下面是CSS，或者您也可以在代码笔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图像。

Answer 3

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

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

Answer 4

可以使用纯CSS / HTML的解决方案，但是当我们将高度扩展到html size =“ 2”，然后再次将高度缩小到整个高度时，就可以解决该问题：

<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/

Answer 5

这可能会给您带来一些安慰，因为您无法触摸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

如何在CSS的选择输入字段中同时使用向上/向下箭头？

5 个答案: