jQuery html 为在每个浏览器中正常工作的每个选项选择不同的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16521565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 17:18:21 来源:igfitidea点击:
html select with different background color for every option that works properly in every browser?
提问by Jagtar
I am looking to build multiple html select elements with custom background colors for each option:
我希望为每个选项构建多个具有自定义背景颜色的 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>
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.
如果该解决方案适用于包括 IE 9/10 在内的大多数浏览器，那就太好了。
Cheers.
干杯。
回答by Singh
Try this code, works in every browser including IE:
试试这个代码，适用于包括 IE 在内的所有浏览器：
html
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
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}
js
js
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 :)
哈 :)
回答by AgeDeO
Please have a look at the following jsfiddle
请看下面的jsfiddle
<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>
回答by Katyoshah
<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>
回答by Pete
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.
这与@Singh 几乎相同，只是做了一些小改动以使其更加灵活，它允许您多次选择更改颜色。
CSS
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
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>
JS
JS
<script>
function colourFunction(pos) {
pos.className = pos[pos.selectedIndex].className;
pos.blur();
}
</script>
回答by Jonah
<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>
