Raketentester: Farbschema eines select anpassen

Beitrag lesen

SELF-Forum

Farbschema eines select anpassen

Raketentester
– Informationen zu den Bewertungsregeln

M.E. ist da jeweils ein Leerzeichen zuviel vor den Punkten…

Was aber nichts an der Aussage ändert. Das GTK malt die Box: Ein statischer gelber Hintergrund geht. Das das rot für die gewählten Boxen ist bestenfalls temporär zu sehen...

select option[selected=true] {
    background-color:red;
}

geht auch nicht, obwohl die Console diese Eigenschaft anzeigt und keinen Fehler meldet.

Das Spielzeug:

<!DOCTYPE html>
<html>
	<head>
		<title>Select</title>
		<style>
			select option.sel {
				background-color:red;
			}
			select option {
				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("change", setClass );
		//s.addEventListener("click", setClass );
		//s.addEventListener("blur", set Class );
		function setClass( ) {
			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];
				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" );
					}					
				}
				console.log(o);
			}
		}
		
		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];
				if (o.selected) {
					o.style.backgroundColor="red";
				} else {
					o.style.backgroundColor="yellow";					
				}
				console.log(o);
			}
		}		
		
		</script>
		
	</body>
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln