nicht angemeldet
[disabled] oder :disabled für formular-styling
2 0
[disabled] oder :disabled für formular-styling
Der MartinHi,
in CSS 3 gibt es ja den *:disabled Pseudo-Selektor, der allerdings nur in aktuellen Browsern funktioniert, breiter unterstützt wird der *[disabled] Attribut-Selektor.
Meine Frage: was ist der Unterschied zwischen den beiden bzw. gibt es konkrete Gründe :disabled statt [disabled] zum Stylen von deaktivierte Formular-Elementen zu nutzen?
Danke schon mal für eure Antworten :)
lg
ScaraX
-
Hi,
in CSS 3 gibt es ja den
*:disabledPseudo-Selektor, der allerdings nur in aktuellen Browsern funktioniert, breiter unterstützt wird der*[disabled]Attribut-Selektor.Meine Frage: was ist der Unterschied zwischen den beiden
Das eine ist eine Pseudoklasse, die dynamisch auf den Zustand eines Elements reagiert - und das andere ein Attributselektor, der nur wirksam ist, wenn das Attribut wirklich im HTML steht.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Das eine ist eine Pseudoklasse, die dynamisch auf den Zustand eines Elements reagiert - und das andere ein Attributselektor, der nur wirksam ist, wenn das Attribut wirklich im HTML steht.
Verstehe... aber in welchem konkreten Fall macht das einen Unterschied bei disabled, wie kann ein Element :disabled sein, ohne [disabled] zu sein und umgekehrt? (Wenn wir einfach mal voraussetzen, dass disabled-Attribute nur in passende Formularelemente eingefügt werden)
Ein kurzer Test in Chrome hat ergeben, dass folgender Code nach einem Klick den [disabled]-Style annimmt, das Attribut wird also in den HTML-Code eingefügt
<input type="text" onclick="this.disabled = true" name="Test" id="Test" value="Beispiel">-
Hallo,
Das eine ist eine Pseudoklasse, die dynamisch auf den Zustand eines Elements reagiert - und das andere ein Attributselektor, der nur wirksam ist, wenn das Attribut wirklich im HTML steht.
Verstehe... aber in welchem konkreten Fall macht das einen Unterschied bei disabled, wie kann ein Element :disabled sein, ohne [disabled] zu sein und umgekehrt?jemand könnte den Zustand "disabled" per Javascript ändern. Das hätte auf [disabled] keinen Einfluss, denn das Attribut bleibt unverändert. Der aktuelle Zustand des Elements ändert sich aber wohl, und :disabled wird diese Modifikation widerspiegeln.
Ein kurzer Test in Chrome hat ergeben, dass folgender Code nach einem Klick den [disabled]-Style annimmt, das Attribut wird also in den HTML-Code eingefügt
<input type="text" onclick="this.disabled = true" name="Test" id="Test" value="Beispiel">Das entspricht nicht der Theorie, denn der obige Code fügt eben *kein* Attribut hinzu, sondern nur eine Eigenschaft des Element-Objekts.
So long,
Martin--
Zwei Freundinnen tratschen: "Du, stell dir vor, die Petra kriegt ein Kind!" - "Ich kann mir schon denken, von wem." - "Dann ruf sie mal schnell an, das würde ihr bestimmt weiterhelfen."
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi,
Ein kurzer Test in Chrome hat ergeben, dass folgender Code nach einem Klick den [disabled]-Style annimmt, das Attribut wird also in den HTML-Code eingefügt
<input type="text" onclick="this.disabled = true" name="Test" id="Test" value="Beispiel">Das entspricht nicht der Theorie, denn der obige Code fügt eben *kein* Attribut hinzu, sondern nur eine Eigenschaft des Element-Objekts.
Ich habe mit FF5 getestet, weil ich dachte, der Unterschied besteht darin, dass [disabled] nur auf Vorhandensein von @disabled prüft und :disabled, ob disabled tatsächlich aktiv ist, aber auch das kann ich negieren.
Ohne das in weiteren Browsern ausprobiert zu haben: ich sehe derzeit keinen Unterschied.
Testcase:
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <style type='text/css'> *[disabled] { background-color:red; } </style> </head> <body> <form> <input type='text' id='ttt'> <button id='btn'>Klick</button> </form> <script type='text/javascript'> var ttt = document.getElementById('ttt'); var btn = document.getElementById('btn'); btn.onclick = function(e) { ttt.disabled = ! ttt.disabled; e.preventDefault(); }; </script> </body> </html>Bis die Tage,
Matti -
Ein kurzer Test in Chrome hat ergeben, dass folgender Code nach einem Klick den [disabled]-Style annimmt, das Attribut wird also in den HTML-Code eingefügt
<input type="text" onclick="this.disabled = true" name="Test" id="Test" value="Beispiel">Das entspricht nicht der Theorie, denn der obige Code fügt eben *kein* Attribut hinzu, sondern nur eine Eigenschaft des Element-Objekts.
Aktuelle Versionen von Firefox, Opera, Safari und IE wenden den [disabled] style an,
Außer im IE (evtl. sind die Entwicklertools einfach zu schlecht) erscheint in allen Browsern ein "disabled"-Attribut im Element-Inspector...Also machen die Browser das dann wohl einvernehmlich falsch ;)
lg
ScaraX
-
-
-