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爲不同的背景顏色選擇在每個瀏覽器中正常工作的每個選項？

回答

相關問題