CSS 中的樣式選擇下拉選單

1. 使用 appearance:none 隱藏預設箭頭並在 CSS 的選擇下拉選單中設定自定義箭頭
2. 使用 overflow:hidden 隱藏預設箭頭並在 CSS 的選擇下拉選單中設定自定義箭頭

在本文中，我們將介紹一些在 CSS 中設定選擇下拉選單樣式的方法。

使用 appearance:none 隱藏預設箭頭並在 CSS 的選擇下拉選單中設定自定義箭頭

我們可以通過隱藏預設箭頭集並新增自定義箭頭集來僅使用 CSS 來設定選擇下拉選單的樣式。有一個 CSS 屬性 appearance 定義了基於作業系統的元素的樣式。使用 appearance 屬性應用的樣式將是平臺原生的。我們可以在 select 標籤上使用這個屬性，並在下拉選單中定義箭頭。appearance 屬性中的 none 選項將從下拉選單中隱藏預設箭頭。然後，我們可以上傳我們的自定義箭頭。我們可以在基於 WebKit 和基於 Blink 的瀏覽器中使用 -webkit-appearance 和 -moz-appearance 屬性。

例如，使用 HTML 中的 select 和 option 標籤建立一個下拉選單。寫下你選擇的選項。在 CSS 中，選擇 select 標籤並設定不同的屬性，如 margin、width、height、padding、font-size、border。接下來，使用 appearance 屬性並將其設定為 none。然後，使用 background 速記屬性來設定自定義箭頭。使用 url() 函式選擇影象。使用 background-repeat、background-size 和 background-color 等屬性為影象設定樣式。使用 no-repeat 選項顯示影象一次。將位置設定為 100%，將 background-size 設定為 15%。

因此，我們使用 CSS 設計了一個下拉選單。

示例程式碼：

<select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
</select>

select {
 margin: 40px;
 width: 160px;
 padding: 4px 30px 4px 4px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 30px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}

使用 overflow:hidden 隱藏預設箭頭並在 CSS 的選擇下拉選單中設定自定義箭頭

我們可以用 div 包裹 select 標籤並將其 overflow 設定為 hidden 以隱藏下拉選單中的預設箭頭。然後，我們可以新增我們的自定義箭頭，與第一種方法相同。將 overflow 屬性設定為 hidden 將裁剪容器中的溢位。其餘內容將被隱藏。我們將定義 div 的寬度小於下拉選單。因此，在 overflow 屬性上使用 hidden 值時，下拉選單中的箭頭將落在容器之外。最後，我們可以新增我們的自定義箭頭。

例如，使用類 menu 建立一個 div。在 div 中，編寫與第一種方法相同的下拉項。在 CSS 中，選擇作為 .menu select 的 menu 類的後代的 select 標記，並應用樣式。將 background 設定為 transparent。建立 140px 的 width。將 font-size 設定為 14px 並建立一個邊框。將選單的高度設定為 35px。接下來，選擇 menu 類並指定 40px 的邊距、125px 的寬度和 34px 的高度。確保容器的寬度小於選單。接下來，將 overflow 設定為 hidden 並將背景影象設定為第一種方法。

在這裡，我們刪除了下拉選單的預設箭頭，並新增了一個自定義箭頭。因此，我們可以在 CSS 中設定選擇下拉選單的樣式。

示例程式碼：

<div class="menu">
 <select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
 </select>
</div>

.menu select {
 background: transparent;
 width: 140px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 35px; 
} 
.menu{
 margin: 40px;
 width: 125px;
 height: 34px;
 border: 1px solid black;
 overflow: hidden;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}