Home/ Questions/Q 7439393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T10:41:57+00:00

I’m having trouble setting the background color (and text color) for the options in

  • 0

I’m having trouble setting the background color (and text color) for the options in a <select> list in Google Chrome.

Seems to work fine in Firefox:

Screen shot 2012-02-08 at 11.57.38 AM.png

But not in Google Chrome:

Closed:

Open:

Screen shot 2012-02-08 at 11.59.00 AM.png

Code:

<html>
<head>
    <style>
        select
        {
            background:yellow!important;
        }
        option
        {
            background:red!important;
        }
        .c1
        {
            background-color:green!important;
            color:red!important;
        }
    </style>
</head>
<body>

<select>
    <option class="c1">nice long option name</option>
    <option class="c2">nice long option name</option>
    <option class="c3">nice long option name</option>
    <option class="c4">nice long option name</option>
    <option class="c5">nice long option name</option>
</select>

</body>
</html>

I wonder if Google Chrome is using it’s own elements or perhaps elements of the host operating system to render the select box and perhaps this is why it doesn’t work? Perhaps it’s a good thing because those colors look fairly horrendous, but it would be nice if Chrome offered a little bit more control.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try:
    select { -webkit-appearance: none; }

    Maybe that should help you.

    If not.. than probably Chrome does not support it.

    • 0