html5 / css3 :disabled pseudo class - working? how to display? what effects does it have?

Question

Css3 Pseudoklasse :disabled

• wird dies noch unterstützt - ich dachte es wäre so, aber ich kann es in Chrome nicht zum Laufen bringen

  • versucht, div.disabled = true zu setzen;
  • versucht, div.endabled = false zu setzen;immer noch keine Freude

• Wenn ich ein ganzes DIV deaktiviert anzeigen möchte, wie kann ich das gesamte DIV verdunkeln, ohne seine Hintergrundfarben zu kennen?

• Wenn der DIV deaktiviert ist, sind dann auch die darin enthaltenen INPUTs und A(nchor)s deaktiviert?

---

meine Lösung: den Bereich der zu deaktivierenden Seite mit einer durchsichtigen Seite mit höherem Z-Index abdecken - dies verhindert jegliche Interaktion mit der darunter liegenden Seite.

Answer 1

1. Ich bin mir ziemlich sicher, dass man ein deaktiviertes Attribut nicht zu einer <div> Tag, nur <input /> , <fieldset> y <command> Tags. Vielleicht sollten Sie ein <fieldset disabled> um Ihr <input /> Elemente stattdessen?

2. Verwenden Sie rgba-Farben oder Deckkraft, um Ihren deaktivierten Elementen ein ausgeblendetes Aussehen zu verleihen, oder hsl-Farben und reduzieren Sie die Sättigung, um den deaktivierten Elementen ein schwarz-weißes Aussehen zu verleihen.

3. Wenn Sie <fieldset disabled> Ich denke, es wird alle Funktionen deaktivieren. <input /> Elemente, die darin enthalten sind.

Answer 2

Die beste Antwort auf Ihre Frage finden Sie in der Definition des Begriffs "deaktiviertes Element".

http://www.w3.org/TR/2000/WD-css3-userint-20000216#pseudo-disabled

2.1.3 Die Pseudoklasse :disabled

Ähnlich wie :enabled, erlaubt :disabled dem Autor, genau festzulegen, wie ein deaktivierte oder inaktive Benutzeroberfläche Element aussehen soll.

I weder aktiviert noch deaktiviert sein werden. Ein Element ist aktiviert, wenn der Benutzer entweder aktivieren oder den Fokus auf es übertragen kann. Ein Element ist deaktiviert, wenn es aktiviert werden könnte, aber der Benutzer kann es derzeit nicht aktivieren oder den Fokus darauf übertragen kann.

:disabled wird in Chrome unterstützt - siehe jsfiddle-Beispiel: http://jsfiddle.net/easwee/zCVGV/3/

Answer 3

Quirksmode umfasst die :disabled Selektor in seiner Kompatibilitätstabelle.

Dieser Tabelle zufolge wird der Stil von allen Browsern unterstützt, mit Ausnahme des IE, wo er erst kürzlich mit IE9 hinzugefügt wurde.

Sie können jedoch die attr Selektor, um das Gleiche zu tun:

.myclass[disabled] { .... }

ist (fast) dasselbe wie

.myclass:disabled { .... }

mit dem Vorteil, dass es in IE7 und IE8 funktioniert.