fietur: Farbschema eines select anpassen

SELF-Forum

Farbschema eines select anpassen

fietur
– Informationen zu den Bewertungsregeln

Hallo,

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.

Fontattribute und Farben für die nicht selektierten Listeneinträge konnte ich anpassen, aber mir fehlt der Anfasser für die selektierten Einträge; etwas wie das nicht funktionierende select:selected {}.

::selection ändert nur die Attribute der für copy&paste markierten Texte. (Was ich nicht einsetze und laut caniuse mit Safari nicht funktioniert.)

Normalerweise fasse ich solche Grundeinstellungen nicht an, aber manche der Einstellungen der "archaischen" Form-Elemente sind einfach inkonsistent oder nicht ganz auf der Höhe der Zeit (oder Mode), wie Fontgrößen oder unterschiedlicher Platzbedarf für gleiche size-Vorgaben in textarea und input. Wenn ich das ohnehin anpassen muss, kann ich auch noch eine zum Farbschema passende Markierungsfarbe festlegen - falls das geht und nicht wieder zum Ausbuddeln von Minen aus den Browserkriegen führt.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Farbschema eines select anpassen

    Matthias Scharwies
    – Informationen zu den Bewertungsregeln

    Servus!

    Hallo,

    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.

    Fontattribute und Farben für die nicht selektierten Listeneinträge konnte ich anpassen, aber mir fehlt der Anfasser für die selektierten Einträge; etwas wie das nicht funktionierende select:selected {}.

    Evtl. hilft dieser Artikel?

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Farbschema eines select anpassen

    Rolf B
    – Informationen zu den Bewertungsregeln

    Hallo fietur,

    aber mir fehlt der Anfasser für die selektierten Einträge; etwas wie das nicht funktionierende select:selected.

    Ja. Der fehlt. Allen. Leider. Zumindest hat meine schnelle Recherche gerade dieses Ergebnis erbracht. Das zugeklappte <select> kann man hin- und herstylen, man kann auch den Options eine Hintergrundfarbe geben, aber das aktive Element unterliegt der Gnade des Betriebssystems.

    Es gibt handgemachte Controls, die mehr ermöglichen - aber die sind dann eben nicht mehr das native SELECT und brauchen einen Schwung JavaScript und per Hand zugewiesene aria-Attribute, um bedienbar zu sein.

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

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

    1. Farbschema eines select anpassen

      Tabellenkalk
      – Informationen zu den Bewertungsregeln

      Hallo,

      		
			select option .sel {
				background-color:red;
			}
			select option .sel {
				background-color:yellow;
			}

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

      Gruß
      Kalk

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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