it-swarm.com.de

html mit unterschiedlicher hintergrundfarbe für jede option auswählen, die in jedem browser einwandfrei funktioniert?

Ich möchte mehrere HTML-Auswahlelemente mit benutzerdefinierten Hintergrundfarben für jede Option erstellen:

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

Beim Laden der Website möchte ich, dass das Auswahlelement nur die Hintergrundfarbe und keinen Text für die ausgewählte Option anzeigt. Der Text (weiß, rot, ....) sollte nur sichtbar sein, wenn das Dropdown-Menü geöffnet ist.

Da der ausgewählte Wert vom Benutzer geändert wird, sollte sich auch die Hintergrundfarbe ändern, während der Text in der geschlossenen Dropdown-Liste unsichtbar sein sollte.

Es wäre wirklich schön, wenn die Lösung auf den meisten Browsern funktioniert, einschließlich IE 9/10.

Prost.

8
Jagtar

Probieren Sie diesen Code aus, funktioniert in jedem Browser, einschließlich 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}

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

9
Singh
   <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>
0
Katyoshah

Dies ist fast das gleiche wie @Singh mit ein paar kleineren Änderungen, um es etwas flexibler zu gestalten. Es erlaubt Ihnen, mehrere Farben auszuwählen.

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>

JS

<script>
    function colourFunction(pos) {
        pos.className = pos[pos.selectedIndex].className;
        pos.blur();
    }
</script>
0
Pete

Bitte schauen Sie sich das folgende Jsfiddle an

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