如何在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> 。 這意味着可以使用CSS選擇器label[for=search-box-filter_31] + p來定位p元素。

首先需要確保有足夠的空間容納新箭頭。 這是通過將選擇的寬度增加新箭頭的寬度，並將相同的量添加到父p的右邊距填充來實現的。 更改選擇寬度的一種方法是使用calc(100% + 30px) 。 如果新箭頭的寬度與默認圖標的寬度相同，則可能不需要執行此操作，但在某些配置中，箭頭可能會與選擇內容重疊。

另外， p元素必須縮小以適合其內容。 有幾種方法可以做到這一點，但在你的情況下，最不可能破壞格式的是設置display: table 。

最后，您可以在p上使用::after偽元素來創建所需的箭頭，並將其覆蓋在select元素的末尾，隱藏默認箭頭。 在下面的示例中，我使用內聯SVG創建了箭頭，但您可以使用最適合您情況的任何背景圖像。 將::after元素設置為position:absolute並將其設置為使其恰好適合select的右側。 要在圖像中的箭頭下創建藍色漸變背景，請使用多個背景，第一個是箭頭，第二個是CSS漸變。

請注意，由於::after元素位於select的頂部，因此單擊箭頭將不會顯示選項。 你可以設置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圖像。

Answer 3

我會在p元素上使用after：選擇器。

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

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

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