Set background color of David Jul 07 '20 at 16:36

Question

From comments on the question above...

I'm using latest Chrome on Mac.

Aye, there's the rub. (To be honest, I'm actually quite surprised that the links provided work on my Windows workstation. Historically styling a <select> and some other form elements has been a pipe dream.)

Some form elements more so than others, and very much so for <select> elements, rely heavily on native OS functionality. Note how a standard <select> with no styling at all looks very different on a Mac than on Windows or Linux for example. And in this case it sounds like the native OS functionality simply doesn't support styling here.

For the most compatability your best bet is probably to use a JavaScript plugin (jQuery has many if you're not against using jQuery, other frameworks have other options if you're already using something) to display a stylized menu from an existing <select>. Or if you're ambitious you can write your own. But the native functionality is at the whim of the OS and will likely continue to be for some time.

score 2 · Accepted Answer · answered Jul 07 '20 at 16:47

From comments on the question above...

I'm using latest Chrome on Mac.

Aye, there's the rub. (To be honest, I'm actually quite surprised that the links provided work on my Windows workstation. Historically styling a <select> and some other form elements has been a pipe dream.)

Some form elements more so than others, and very much so for <select> elements, rely heavily on native OS functionality. Note how a standard <select> with no styling at all looks very different on a Mac than on Windows or Linux for example. And in this case it sounds like the native OS functionality simply doesn't support styling here.

For the most compatability your best bet is probably to use a JavaScript plugin (jQuery has many if you're not against using jQuery, other frameworks have other options if you're already using something) to display a stylized menu from an existing <select>. Or if you're ambitious you can write your own. But the native functionality is at the whim of the OS and will likely continue to be for some time.

I was already using Bootstrap, so the Bootstrap dropdown was a great solution. Thanks for the tip. — new name, Jul 08 '20 at 12:19

score 0 · Answer 2 · answered Jul 07 '20 at 16:36

0

I hope this works for you. I used #id selector in css and it worked :

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    <style type="text/css">
        #red{
            background-color: red;
        }
        #yellow{
            background-color: yellow;
        }
        #green{
            background-color: green;
        }
    </style>
    <select>
        <option id="red">Option 1</option>
        <option id="yellow">Option 2</option>
        <option id="green">Option 3</option>
    </select>

    </body>
</html>

answered Jul 07 '20 at 16:36

El Ghazouani Mohammed

26
4

Doesn't work for me. Though I didn't downvote you. People are being awfully negative on the question and answers here... – new name Jul 07 '20 at 16:55
@gaefan Just trying to help mate. I will try it on Mac and let you know. – El Ghazouani Mohammed Jul 08 '20 at 08:27

score 0 · Answer 3 · answered Jul 07 '20 at 16:56

Why its not working in your browser. I tried the same code and it worked in my browser.

<select>
  <option class="yellow">Option 1</option>
  <option class="blue">Option 2</option>
  <option class="red">Option 3</option>
</select>

and the css code as below :

.yellow{
   background-color:yellow;
}

.blue{
     background-color:blue;
 }

.red{
 background-color:red;
 }

if it's still not working then I suggest to wrap your options either in or tag and apply background-colour property to them.

3 Answers3