I'm rendering a form using django. One of the fields in the form is a select with options.

Rendering form field:

{{ form.work }}

The select options after rendering are:

<select name="work" class="form-control" required="" id="id_work">
  <option value="" selected="">---------</option>
  <option value="chair">The chair</option>
  <option value="table">The table</option>
</select>

How can i change the background color for each of the values? So when i press the dropdown arrow to see all values with different colors.

I used css with no success.

select option[value="chair"] {
  background-color: red !important;
}

select option:nth-child(2) {
  background: red;
}

As a note, the form consists of different fields with select options. I use bootstrap 4.

Thank you

CodePudding user response：

For the second style you need to use nth-of-type. But as CSS only it works:

select option[value="chair"] {
  background-color: red;
}

select option:nth-of-type(3) {
  background: green;
}

<select name="work" class="form-control" required="" id="id_work">
  <option value="" selected="">---------</option>
  <option value="chair">The chair</option>
  <option value="table">The table</option>
</select>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can set some flag as well if there are only 2 drop-down values.