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

我希望建立自定义背景色多个HTML选择元素为每个选项：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在内的大多数浏览器，那将非常好。

干杯。

来源

2013-05-13 Jagtar

试试这个代码，工作在每一个浏览器，包括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 :)

来源

2013-05-13 22:25:06 Singh

非常感谢 - 这完美的作品！ – Jagtar 2013-05-13 22:26:54

你的欢迎:) – Singh 2013-05-13 22:27:41

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

来源

2013-05-13 12:04:34 AgeDeO

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

来源

2013-12-26 10:06:56 Katyoshah

这是几乎一样@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>

来源

2016-08-18 05:44:04 Pete

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

回答

相关问题