How to Style the Option of an HTML "Select" Element

select option:first-child {  display: none;}

<select>  <option selected>Select a product</option>  <option>Product 1</option>  <option>Product 2</option>  <option>Product 3</option></select>

Styling select tags using CSS

You can't really. Check this snippet from mdn: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

The <select> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the box model, the displayed font, etc., and you can use the appearance property to remove the default system appearance.

However, these properties don't produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The <select> element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

Do indeed check the advanced guide for the little you can do to style them. A good example of how bad styling is for options:

You'll notice that the options don't inherit the font set on the parent. You also can't consistently set things like spacing and colors. For example, Firefox will apply color and background-color when set on the <option> elements, Chrome won't. Neither of them will apply any kind of spacing

How to style the option in the select input

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>