如何設置 select 輸入中的選項樣式

Question

我想設置 select 輸入中的選項樣式

我想為選項添加填充，請幫助我

 label{ font-size: 15px; font-family: 'arial'; display: inline; } select{ display: inline; padding: 5px 10px; } option{ padding: 10px; }

 <label for="fruits">Fruits</label> <select name="fruits"> <option>Apple</option> <option>Mango</option> <option>Banana</option> <option>MuskMelon</option> </select>

Answer 1

您不能在這樣的選項菜單中進行太多更改。 如果你想制作一個完整的自定義下拉菜單，那么你必須自己制作所有組件。 我很確定您只能更改選項元素中的文本，而不能更改周圍環境，如果可以，您可能必須使用 javascript 而不是 css

 /* Style The Dropdown Button */.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* The container <div> - needed to position the dropdown content */.dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */.dropdown-content a:hover {background-color: #f1f1f1} /* Show the dropdown menu on hover */.dropdown:hover.dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */.dropdown:hover.dropbtn { background-color: #3e8e41; }

 <div class="dropdown"> <button class="dropbtn">Fruit</button> <div class="dropdown-content"> <a href="#">Apple</a> <a href="#">Mango</a> <a href="#">Banana</a> <a href="#">MuskMelon</a> </div> </div>