如何设置 select 输入中的选项样式

Question

I want to style options present in the select input

I want to add padding for the options please help me with that

 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

You can't change much inside of an options menu like that. If you want to make a full customization dropdown menu then you have to make all the components yourself. I'm pretty sure you can only change the text in the option element but not the surroundings and if you can you probably have to use javascript not 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>