Can we customize select option form?

Question

Is it possible to customize the select option form? I want to customize the dropdown. Like changing the background color.

Code from w3schools:

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Definitely yes, try i.e, adding a new css class like: `#cars { background-color: red }` — AdriSolid, Feb 07 '21 at 20:51
Sadly its not working. I need to customize the dropdown items. — ChiieCruz, Feb 07 '21 at 20:58
Try adding styles by tag then `#cars > option {background-color: red;}` — AdriSolid, Feb 07 '21 at 21:02

bavShehata · Accepted Answer · 2021-02-07T21:20:51.757

You can definitely do so, although it will require some JavaScript.

In your HTML, create the select element as you would usually do, and enclose it inside a div. The select element will contain the actual options that you want to be displayed, while the div will be targetted by JavaScript to create your custom select which can be customized with CSS afterward. W3C offers a really good example with the required HTML, CSS, and JS.

While the previous gives you more control and customization, here is an alternative with no JavaScript whatsoever.

score 0 · Answer 2 · answered Feb 07 '21 at 21:02

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value="volvo" style="background-color:red;">Volvo</option>
    <option value="saab" style="background-color:blue;">Saab</option>
    <option value="opel" style="background-color:yellow;">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

score 0 · Answer 3 · answered Feb 07 '21 at 21:12

Just add a class to your select

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select class="customselect" name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Add use css . selector

.customselect{
  background-color: green;
}

You can see documentation about select css properties here

Can we customize select option form?

3 Answers3