CODEWITHSUNDEEP
htmlcssgoogle-chromehtml-select
AndroidDev
AndroidDev

Reputation: 21237

HTML <select> with background-color <option> tags using Chrome

I'm trying to make a drop down list that allows a user to select from a list of colors. I want the background of each <option> item to be the color that the user can choose. As proof of concept, I made this little html page:

<!DOCTYPE html>
<html>
<head>

    <style media="screen" type="text/css">
        .white  {background-color:white;}
        .red    {background-color:red;}
        .yellow {background-color:yellow;}
        .green  {background-color:green;}
    </style>

</head>
<body>

    <h2>Choose Color</h2>
    <select>
        <option class="white">This should have a WHITE background</option>
        <option class="red">This should have a RED background</option>
        <option class="yellow">This should have a YELLOW background</option>
        <option class="green">This should have a GREEN background</option>
    </select>

</body>
</html>

When I run this on Firefox, either on a PC or a Mac, it looks great. However, testing it on Chrome on a Mac, it doesn't show these background colors. Here is a screen shot of the page after it renders in Chrome and I click on the select object:

enter image description here

You can see that the list is just in the standard format with gray backgrounds. You can also see that the items are connected with the correct class.

I am aware that there are a few posts on this issue, which is where I got my initial code from. However, none of the posts that I read on this issue are working for me.

What am I doing wrong? Thank you!

Upvotes: 2

Views: 6763

Answers (3)

Christian Esperar
Christian Esperar

Reputation: 528

Styling option has some problem on different OS. Are you not allowed to use any plugin like bootstrap-select? Since the element is li, this will surely accomplish what you want

Upvotes: 1

nifCody
nifCody

Reputation: 2444

@Randal Here you can check your code is working fine. Run code snippet on the bottom

<head>

    <style media="screen" type="text/css">
        .white  {background-color:white;}
        .red    {background-color:red;}
        .yellow {background-color:yellow;}
        .green  {background-color:green;}
    </style>
<body>

    <h2>Choose Color</h2>
    <select>
        <option class="white">This should have a WHITE background</option>
        <option class="red">This should have a RED background</option>
        <option class="yellow">This should have a YELLOW background</option>
        <option class="green">This should have a GREEN background</option>
    </select>

Upvotes: 0

faino
faino

Reputation: 3224

In the link you provided, the answer given was using JavaScript and some CSS manipulation, this is working fine on my end:

<!DOCTYPE html>
<html>
<head>

    <style media="screen" type="text/css">
        .white  {background-color:white;color:red;}
        .red    {background-color:red;color:black;}
        .yellow {background-color:yellow;color:black;}
        .green  {background-color:green;color:white;}
    </style>


</head>
<body>

    <h2>Choose Color</h2>
    <select>
        <option class="white">This should have a WHITE background</option>
        <option class="red">This should have a RED background</option>
        <option class="yellow">This should have a YELLOW background</option>
        <option class="green">This should have a GREEN background</option>
    </select>

    <script>
        var select = document.querySelector('select');
        var colorChange = function(){
            var color = select.options[select.selectedIndex].className;
            select.className = color;
            select.blur();
        };
        select.addEventListener('change', colorChange);
        colorChange();
    </script>

</body>
</html>

Also I added the color property in a couple classes to show you can manipulate more than just the background color.

Upvotes: 0

Related Questions