html 为在每个浏览器中正常工作的每个选项选择不同的背景颜色？答案

【问题标题】：html select with different background color for every option that works properly in every browser?html 为在每个浏览器中正常工作的每个选项选择不同的背景颜色？
【发布时间】：2013-05-07 10:59:49
【问题描述】：

我希望为每个选项构建多个带有自定义背景颜色的 html 选择元素：

<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>

当网站加载时，我希望选择元素只显示背景颜色而不显示所选选项的文本。文本（白色、红色、....）应仅在打开下拉菜单时可见。

当用户更改所选值时，背景颜色也应更改，而文本应在关闭的下拉菜单中不可见。

如果该解决方案适用于包括 IE 9/10 在内的大多数浏览器，那就太好了。

干杯。

【问题讨论】：

标签： javascript jquery html css select

【解决方案1】：

请看下面的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>

【讨论】：

【解决方案2】：

试试这段代码，它适用于包括 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 :)

【讨论】：

【解决方案3】：

   <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>

【讨论】：

【解决方案4】：

这与@Singh 几乎相同，只是做了一些小改动以使其更加灵活，它允许您让多个选择更改颜色。

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>

【讨论】：

【解决方案5】：

<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>

【讨论】：