Wybór html z innym kolorem tła dla każdej opcji, która działa poprawnie w każdej przeglądarce?

szukam zbudować wiele html wybierz elementy z niestandardowe kolory tła dla każdej opcji:Wybór html z innym kolorem tła dla każdej opcji, która działa poprawnie w każdej przeglądarce?

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

Po załadowaniu www, chciałbym wybrać element, aby wyświetlić tylko kolor tła i nie zawiera tekstu dla wybranej opcji. Tekst (biały, czerwony, ....) powinien być widoczny tylko po otwarciu listy rozwijanej.

Gdy wybrana wartość zostanie zmieniona przez użytkownika, kolor tła powinien również ulec zmianie, gdy tekst powinien być niewidoczny w zamkniętym menu rozwijanym.

Byłoby naprawdę dobrze, gdyby to rozwiązanie działało w większości przeglądarek, w tym w IE 9/10.

Pozdrawiam.

Źródło

2013-05-13 Jagtar

Spróbuj tego kodu działa w każdej przeglądarce, w tym 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 :)

Źródło

2013-05-13 22:25:06 Singh

Thanks a lot - który działa idealnie! – Jagtar

Twoje powitanie :) – Singh

Proszę spojrzeć na poniższy 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>

Źródło

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>

Źródło

2013-12-26 10:06:56 Katyoshah

Jest niemal tak samo jak @Singh z niewielkimi zmianami, aby uczynić go trochę bardziej elastyczny, pozwala mieć wielokrotność wybiera zmianę kolorów.

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>

Źródło

2016-08-18 05:44:04 Pete

Wybór html z innym kolorem tła dla każdej opcji, która działa poprawnie w każdej przeglądarce?

Odpowiedz

Powiązane problemy