How to show the option with a value=0 with red background using CSS and/or jQuery, no matter if it i-CodePudding

I have tried simple CSS solutions, as well as a combination of both CSS and jQuery. The problem is that they show the option with the 0 value in red only when it is not selected.

.red {
  background: red;
}

select option[value=0] {
  background: red;
}

<select id="ups">
  <option value=0  selected="selected">No</option>
  <option value=1>Yes</option>
</select>

I have already conducted extensive search, so please any help is appreciated. Thanks.

CodePudding user response：

I guess it depends on the browser, on firefox I can't see anything with red background, even not selected.

There is a similar question here: How to style the option of an html "select" element?

People linked this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select

I don't think done in this way that can work for only one of the options. Yet you can make it when one is selected('No' for example) background for the whole thing to go red. Not perfect, but as close as possible I think that will work on most popular browsers.