javascript - html select with different background color for every option that works properly in every browser?

I am looking to build multiple html select elements with custom background colors for each option:

<select runat="server" id="select">
<option value="A">White</option>
<option value="B">Red</option>
<option value="C">Yellow</option>
<option value="D">Green</option>

When the website loads, I would like the select element to display only the background color and no text for the selected option. The text (white, red,....) should only be visible when the dropdown is opened.

As the selected value is changed by the user, the background color should change as well while the text should be invisible in the closed dropdown.

It would be really nice if the solution works on most browsers including IE 9/10.

Cheers.

I am looking to build multiple html select elements with custom background colors for each option:

<select runat="server" id="select">
<option value="A">White</option>
<option value="B">Red</option>
<option value="C">Yellow</option>
<option value="D">Green</option>

As the selected value is changed by the user, the background color should change as well while the text should be invisible in the closed dropdown.

It would be really nice if the solution works on most browsers including IE 9/10.

Cheers.

Share Improve this question edited May 13, 2013 at 13:04 asked May 13, 2013 at 12:00 Jagtar 1863 gold badges5 silver badges11 bronze badges

Add a comment |

5 Answers 5

Sorted by: Reset to default 9

Try this code, works in every browser including IE:

html

<select id="select1" onchange="colourFunction()">
<option class="white" value="A">This should have a WHITE background</option>
<option class="red" value="B">This should have a RED background</option>
<option class="yellow" value="C">This should have a YELLOW background</option>
<option class="green" value="D">This should have a GREEN background</option>
</select>

css

#select1 {width:150px; color:rgba(0, 0, 0, 0);}
#select1:focus, #select1:focus {
color:black;
}
.white {background:white;}
.red {background:red;}
.yellow {background:yellow;}
.green {background:green}

function colourFunction() {
var myselect = document.getElementById("select1"),
colour = myselect.options[myselect.selectedIndex].className;
myselect.className = colour;
myselect.blur(); //This just unselects the select list without having to click
somewhere else on the page
}

HTH :)

Please have a look at the following jsfiddle

http://jsfiddle.net/xt3xv/1/

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<select runat="server" id="select">
    <option value="A" style="background-color: white;">White</option>
    <option value="B" style="background-color: red;">Red</option>
    <option value="C" style="background-color: yellow;">Yellow</option>
    <option value="D" style="background-color: green;">Green</option>
</select>
<script>
$('#select').change(function(){
      if($(this).val() == 'A'){
        $("body").css('background-color', 'white');
      }
        if($(this).val() == 'B'){
        $("body").css('background-color', 'red');
      }
        if($(this).val() == 'C'){
        $("body").css('background-color', 'yellow');
      }
        if($(this).val() == 'D'){
        $("body").css('background-color', 'green');
      }
    });
</script>
</body>
</html>

   <script>

   function changecolor(id,color){

  id.style.backgroundColor=color;


 }
  </script>


    <div id="container">

     <p> Select Color to change background:</p>


    <select id="themenu" onchange="changecolor(container,value)">
   <option value="white"> </option>
   <option value="red">RED</option>
   <option value="blue">BLUE</option>
   <option value="green">GREEN</option>
   </select>


   </div>

This is pretty much the same as @Singh with some minor changes to make it a little more flexible, it allows you to have multiple selects change colours.

CSS

<style>
    .red {
        color: darkred;
        background-color: red;
    }

    .purple {
        color: darkmagenta;
        background-color: magenta;
    }

    .yellow {
        color: darkkhaki;
        background-color: yellow;
    }

    .aqua {
        color: mediumaquamarine;
        background-color: aqua;
    }

    .blue {
        color: lightblue;
        background-color: blue;
    }

    .green {
        color: lightgreen;
        background-color: green;
    }
</style>

html

<select name="pos1" id="pos1" onchange="colourFunction(this)">
    <option disabled selected value>select</option>
    <option class="red" value="1">Red</option>
    <option class="purple" value="2">Purple</option>
    <option class="yellow" value="3">Yellow</option>
    <option class="aqua" value="4">Aqua</option>
    <option class="blue" value="5">Blue</option>
    <option class="green" value="6">Green</option>
</select>

<select name="pos2" id="pos2" onchange="colourFunction(this)">
    <option disabled selected value>select</option>
    <option class="red" value="1">Red</option>
    <option class="purple" value="2">Purple</option>
    <option class="yellow" value="3">Yellow</option>
    <option class="aqua" value="4">Aqua</option>
    <option class="blue" value="5">Blue</option>
    <option class="green" value="6">Green</option>
</select>

<script>
    function colourFunction(pos) {
        pos.className = pos[pos.selectedIndex].className;
        pos.blur();
    }
</script>

<select>
<option  value="AliceBlue">AliceBlue</option>
<option  value="AntiqueWhite">AntiqueWhite</option>
<option  value="Aqua">Aqua</option>
<option  value="Aquamarine">Aquamarine</option>
<option  value="Azure">Azure</option>
<option  value="Beige">Beige</option>
<option  value="Bisque">Bisque</option>
<option  value="Black">Black</option>
<option  value="BlanchedAlmond">BlanchedAlmond</option>
<option  value="Blue">Blue</option>
<option  value="BlueViolet">BlueViolet</option>
<option  value="Brown">Brown</option>
<option  value="BurlyWood">BurlyWood</option>
<option  value="CadetBlue">CadetBlue</option>
<option  value="Chartreuse">Chartreuse</option>
<option  value="Chocolate">Chocolate</option>
<option  value="Color">Color</option>
<option  value="Coral">Coral</option>
<option  value="CornflowerBlue">CornflowerBlue</option>
<option  value="Cornsilk">Cornsilk</option>
<option  value="Crimson">Crimson</option>
<option  value="Cyan">Cyan</option>
<option  value="DarkBlue">DarkBlue</option>
<option  value="DarkCyan">DarkCyan</option>
<option  value="DarkGoldenrod">DarkGoldenrod</option>
<option  value="DarkGray">DarkGray</option>
<option  value="DarkGreen">DarkGreen</option>
<option  value="DarkKhaki">DarkKhaki</option>
<option  value="DarkMagenta">DarkMagenta</option>
<option  value="DarkOliveGreen">DarkOliveGreen</option>
<option  value="DarkOrange">DarkOrange</option>
<option  value="DarkOrchid">DarkOrchid</option>
<option  value="DarkRed">DarkRed</option>
<option  value="DarkSalmon">DarkSalmon</option>
<option  value="DarkSeaGreen">DarkSeaGreen</option>
<option  value="DarkSlateBlue">DarkSlateBlue</option>
<option  value="DarkSlateGray">DarkSlateGray</option>
<option  value="DarkTurquoise">DarkTurquoise</option>
<option  value="DarkViolet">DarkViolet</option>
<option  value="DeepPink">DeepPink</option>
<option  value="DeepSkyBlue">DeepSkyBlue</option>
<option  value="DimGray">DimGray</option>
<option  value="DodgerBlue">DodgerBlue</option>
<option  value="FireBrick">FireBrick</option>
<option  value="FloralWhite">FloralWhite</option>
<option  value="ForestGreen">ForestGreen</option>
<option  value="Fuchsia">Fuchsia</option>
<option  value="Gainsboro">Gainsboro</option>
<option  value="GhostWhite">GhostWhite</option>
<option  value="Gold">Gold</option>
<option  value="Goldenrod">Goldenrod</option>
<option  value="Gray">Gray</option>
<option  value="Green">Green</option>
<option  value="GreenYellow">GreenYellow</option>
<option  value="Honeydew">Honeydew</option>
<option  value="HotPink">HotPink</option>
<option  value="IndianRed">IndianRed</option>
<option  value="Indigo">Indigo</option>
<option  value="Ivory">Ivory</option>
<option  value="Khaki">Khaki</option>
<option  value="Lavender">Lavender</option>
<option  value="LavenderBlush">LavenderBlush</option>
<option  value="LawnGreen">LawnGreen</option>
<option  value="LemonChiffon">LemonChiffon</option>
<option  value="LightBlue">LightBlue</option>
<option  value="LightCoral">LightCoral</option>
<option  value="LightCyan">LightCyan</option>
<option  value="LightGoldenrodYellow">LightGoldenrodYellow</option>
<option  value="LightGreen">LightGreen</option>
<option  value="LightGrey">LightGrey</option>
<option  value="LightPink">LightPink</option>
<option  value="LightSalmon">LightSalmon</option>
<option  value="LightSeaGreen">LightSeaGreen</option>
<option  value="LightSkyBlue">LightSkyBlue</option>
<option  value="LightSlateGray">LightSlateGray</option>
<option  value="LightSteelBlue">LightSteelBlue</option>
<option  value="LightYellow">LightYellow</option>
<option  value="Lime">Lime</option>
<option  value="LimeGreen">LimeGreen</option>
<option  value="Linen">Linen</option>
<option  value="Magenta">Magenta</option>
<option  value="Maroon">Maroon</option>
<option  value="MediumAquamarine">MediumAquamarine</option>
<option  value="MediumBlue">MediumBlue</option>
<option  value="MediumOrchid">MediumOrchid</option>
<option  value="MediumPurple">MediumPurple</option>
<option  value="MediumSeaGreen">MediumSeaGreen</option>
<option  value="MediumSlateBlue">MediumSlateBlue</option>
<option  value="MediumSpringGreen">MediumSpringGreen</option>
<option  value="MediumTurquoise">MediumTurquoise</option>
<option  value="MediumVioletRed">MediumVioletRed</option>
<option  value="MidnightBlue">MidnightBlue</option>
<option  value="MintCream">MintCream</option>
<option  value="MistyRose">MistyRose</option>
<option  value="Moccasin">Moccasin</option>
<option  value="NavajoWhite">NavajoWhite</option>
<option  value="Navy">Navy</option>
<option  value="OldLace">OldLace</option>
<option  value="Olive">Olive</option>
<option  value="OliveDrab">OliveDrab</option>
<option  value="Orange">Orange</option>
<option  value="OrangeRed">OrangeRed</option>
<option  value="Orchid">Orchid</option>
<option  value="PaleGoldenrod">PaleGoldenrod</option>
<option  value="PaleGreen">PaleGreen</option>
<option  value="PaleTurquoise">PaleTurquoise</option>
<option  value="PaleVioletRed">PaleVioletRed</option>
<option  value="PapayaWhip">PapayaWhip</option>
<option  value="PeachPuff">PeachPuff</option>
<option  value="Peru">Peru</option>
<option  value="Pink">Pink</option>
<option  value="Plum">Plum</option>
<option  value="PowderBlue">PowderBlue</option>
<option  value="Purple">Purple</option>
<option  value="Red">Red</option>
<option  value="RosyBrown">RosyBrown</option>
<option  value="RoyalBlue">RoyalBlue</option>
<option  value="SaddleBrown">SaddleBrown</option>
<option  value="Salmon">Salmon</option>
<option  value="SandyBrown">SandyBrown</option>
<option  value="SeaGreen">SeaGreen</option>
<option  value="Seashell">Seashell</option>
<option  value="Sienna">Sienna</option>
<option  value="Silver">Silver</option>
<option  value="SkyBlue">SkyBlue</option>
<option  value="SlateBlue">SlateBlue</option>
<option  value="SlateGray">SlateGray</option>
<option  value="Snow">Snow</option>
<option  value="SpringGreen">SpringGreen</option>
<option  value="SteelBlue">SteelBlue</option>
<option  value="Tan">Tan</option>
<option  value="Teal">Teal</option>
<option  value="Thistle">Thistle</option>
<option  value="Tomato">Tomato</option>
<option  value="Turquoise">Turquoise</option>
<option  value="Violet">Violet</option>
<option  value="Wheat">Wheat</option>
<option  value="White">White</option>
<option  value="WhiteSmoke">WhiteSmoke</option>
<option  value="Yellow">Yellow</option>
<option  value="YellowGreen">YellowGreen</option>
</select>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - html select with different background color for every option that works properly in every browser? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)