代码之家 › 专栏 › 技术社区 › john

如何在CSS的select输入框中同时设置上下箭头?

wordpress css html jquery javascript

john · 技术社区 · 6 年前

我正在做一件事 website ( )我想补充一下 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 网站 .

5 回复 | 直到 6 年前

user2560539 user2560539 6 年前

这是一个简单而直接的示例,使用base64编码的字体图标作为选择框的背景图像。

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

jla 6 年前

要仅使用CSS重新设置select项的样式,您需要同时针对select及其父项 p 元素。select有一个ID,这个ID很容易定位,但是定位特定的ID p p ,的形式 <label for="search-box-filter_31">Name of Institution</label> . 这意味着元素可以使用CSS选择器作为目标 label[for=search-box-filter_31] + p .

你首先需要确保你有足够的空间放你的新箭。这是通过将select的宽度增加新箭头的宽度,并向父箭头添加相同的值来实现的 p calc(100% + 30px)

另外 p display: table .

::after 伪元素开启 p 创建所需的箭头,并将其覆盖在select元素的末尾,隐藏默认箭头。在下面的示例中,我使用内联SVG创建了箭头,但是您可以使用最适合您的情况的任何背景图像。设置 ●之后 要具有的元素 position:absolute

注意,自从 ●之后 元素位于select的顶部,单击箭头将不显示选项。你可以设置 pointer-events: none; 通过点击,但这将不适用于IE。

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)将以不同的方式显示内容,并且你的自定义样式将不匹配。为了在所有浏览器和操作系统中都有一个无缝的外观,您需要确保所有select/input元素的样式都相互匹配。

Dhul Wells 6 年前

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

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

nektobit 6 年前

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

Mohan Wijesena 6 年前

#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