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

Posted 2023-02-22

【中文标题】如何在 CSS 的选择输入字段中同时制作上/下箭头？

【英文标题】：How to make both up/down arrow in select input field in CSS?

【发布时间】：2019-03-05 11:36:35

【问题描述】：

我正在开发一个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>

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

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

问题陈述：

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

【问题讨论】：

***.com/questions/14218307/select-arrow-style-change 这会帮助你

@Francesco Fortin 没有多大帮助。我需要在 css 的选择输入字段中创建向上/向下箭头。上述问题只有一个向下箭头。

您发布的屏幕截图来自 OSX，您希望它在 Windows 等其他操作系统上也显示相同的向上/向下箭头吗？ @FrancescoFortin 看起来是正确的，但您需要提供图片才能在此处显示向上和向下箭头。

【参考方案1】：

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

要仅使用 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。

最后，您可以使用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 会以不同的方式显示内容，并且您的自定义样式将不匹配。要在所有浏览器和操作系统中获得无缝外观，您需要确保所有选择/输入元素的样式都相互匹配。

【参考方案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图片。

【讨论】：

检查。敬请期待。

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

我已接受您的回答。我认为它奏效了。我也颁发了赏金。我还有一个类似的question。我想知道你是否可以看看。它是与 wordpress 插件 css 相关的东西。从过去的 24 小时开始，我一直坚持这一点

【参考方案3】：

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

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

【讨论】：

我们的选项有限，因为我们无法更改 html。剩下的唯一选项是 css。

我贴的例子是CSS。

是的，我知道。我只是说说而已。

您使用的是箭头图像，对吗？这绝对适合你。

这一切都来自 wordpress 表单。我什么都没用。

【参考方案4】：

纯 CSS / HTML 的解决方案是可用的，但是当我们通过 html size = "2" 扩展高度然后再次通过高度将其缩小时通过 hack 工作：

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

【讨论】：

我无法对 html 代码进行任何更改，因为这些都是在进行检查后来自 wordpress。我唯一可以进行更改的地方是 CSS。我想知道你是否知道可以解决它的 CSS。

这个任务仅靠 CSS 是无法解决的。无论如何，您将需要 javascript。任何仅使用 CSS 解决此问题的方法都会在不同的浏览器和操作系统中引起问题。

我们先来决定，是不是只需要右边有一个带有上下箭头的图标，这样当你点击箭头时就会出现一个下拉菜单？或者您是否需要这些箭头成为成熟的工人，即这两个箭头的单独行为？如果您在网络上找到您想要的工作示例会更好，也许在某个网站上并添加一个链接到您的问题。

你的第一点对我来说很有意义。我需要一个带有蓝色上下箭头的图标，当我们点击箭头时应该会出现一个下拉菜单。

【参考方案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