如何使用CSS將更改應用於“選擇”選項

Question

這是它的外觀示例： 選擇框圖像

我從數據庫中獲取國家/地區名稱，並在頁面上生成動態選項。 現在，我正在顯示HTML代碼（不是數據庫代碼）。 我嘗試了許多鏈接來更改設計（CSS），但是沒有一個在“選擇”上起作用。 我希望能夠更改padding , border, background-color, color或border-color 。 我是否可以使用css對所有這些進行修改，以進行“選擇”？

我也只想使用scrollbar在單擊按鈕時在下拉列表中顯示前5個選項（前5個國家/地區名稱）。

 #country option:first-child { display: none; } #country { float: left; width: 96%; color: #fff; font-size: 1em; font-family: "Calibri"; margin-left: 5px; padding: 8px 0px; margin-top: 16px; border: 1px solid #00BCEA; padding: 9px 5px; width: 93%; border-radius: 4px; color: #00BCEA; } 

 <select id="country"> <option value="selectOption">Select your country</option> <option value="selectOption1">Select your country1</option> <option value="selectOption2">Select your country2</option> <option value="selectOption3">Select your country3</option> <option value="selectOption4">Select your country4</option> <option value="selectOption5">Select your country5</option> <option value="selectOption6">Select your country6</option> <option value="selectOption7">Select your country7</option> </select> 

Answer 1

您可以嘗試以下插件。 這將幫助您設置選擇框的樣式。 select插件將select元素映射到HTML <ul>元素，並在其上應用樣式。 如果檢查DOM，則select元素將可見，但對瀏覽器而言是隱藏的。

• http://github.hubspot.com/select/docs/welcome/
• https://select2.github.io/

希望這個能對您有所幫助

謝謝，