Raketentester: Farbschema eines select anpassen

Beitrag lesen

SELF-Forum

Farbschema eines select anpassen

Raketentester
– Informationen zu den Bewertungsregeln

wie kann ich in einer <form> die Farbe der selektierten <option> Einträge eines <select> ändern? Das Farbschema einiger Seiten beisst sich mit den Standardwerten aus dem Browser.

Das Problem ist schon lange bekannt.

Ich habe auch gerade noch einmal herumprobiert. Mit CSS offenbar gar nicht, aber selbst in Javascript hat es sowohl mit der direkten Zuweisung der Hintergrundfarbe als auch mit einer Klassenzuweisung NICHT geklappt (Naja: Mein Firefox zeigt die eine zehntel Sekunde lang an...)

Offenbar gibt der Browser den Auftrag, die Select-Box (und also die Options) auf das Anzeigerät zu "malen" an das Betriebssystem. Wenn ich hier nämlich unter XFCE4 das Erscheinungsbild meiner gesamten graphischen Oberfläche zu „Numix“ wechsle sind die gewählten Einträge rot, bei „Greybird“ indes blau. Das ḿacht die Sache zumindest unter Linux und wohl auch anderen Unixoiden klar. (Bei anderen Elementen wie Buttons ist da auch genau so - aber nur so lange wie keinen Style verpasst bekommen).

Wie die Dinge also liegen wirst Du wohl was anderes bauen müssen. Bei Multiselects währen wohl checkboxen mit labels as Mittel der Wahl.

Wie das unter Windows aussieht mag ein anderer testen:

Das NICHT funktionierende Zeug für eigene Tests. man sehe mir bitte nach, dass ich mir keine Mühe gegeben habe, den Code zu verhübschen…

<!DOCTYPE html>
<html>
<!--
Das wird nicht funktionieren!
-->
	<head>
		<title>Select</title>
		<style>
			select option .sel {
				background-color:red;
			}
			select option .sel {
				background-color:yellow;
			}			
		</style>
	</head>
	<body>
		<form>
			<select name="m" multiple>
				<option>foo</option>
				<option>bar</option>
				<option>baz</option>
				<option>tok</option>
			</select>
		</form>
		<script>
		s=document.forms[0].elements["m"];
		s.addEventListener("change", setBgColor );
		s.addEventListener("click", setBgColor );
		s.addEventListener("blur", setBgColor );
		function setBgColor( ) {
			s=document.forms[0].elements["m"];
			//console.log(s);
			a=s.options;
			//console.log(a);
			c=a.length;
			//console.log(c);
			for (i=0; i<c; i++ ) {
				o=a[i];
				console.log(o);
				classes = o.className.split(" ");
				if (o.selected) {
					if (classes.indexOf("sel") == -1) {
						o.classList.add("sel");
						console.log( "Klasse zu Option " + i + " hinzugefügt" );
					}

				} else {
					if (classes.indexOf("sel") != -1) {
						o.classList.remove("sel");
						console.log( "Klasse von Option " + i + " entfernt" );
					}					
				}
			}
		}
		</script>

	</body>
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln