How to style the option in the select input-CodePudding

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>

CodePudding user response：

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 >
  <button >Fruit</button>
  <div >
    <a href="#">Apple</a>
    <a href="#">Mango</a>
    <a href="#">Banana</a>
    <a href="#">MuskMelon</a>
  </div>
</div>