Welcher Selektor für ein deaktiviertes Kontrollkästchen, um das Pseudo-Element des entsprechenden Labels zu ändern?

Question

Ich habe ein Kontrollkästchen gemacht, es über clip: rect(0 0 0 0) unsichtbar gemacht und die Beschriftung dieses Kontrollkästchens gestylt. Ich benutzte die

input[type="checkbox"] + label:before Selektor

ein eigenes Kontrollkästchen, um Stil und die

input[type="checkbox"] + label:after Selektor

eine benutzerdefinierte "geprüft" Zeichen stylen.

Ich habe mehrere Kontrollkästchen auf einer Seite, die sich dynamisch ändern, um deaktiviert zu werden, aber nicht versteckt (wie ich möchte, dass der Benutzer die verfügbaren Optionen sehen).

Allerdings, wenn ich das Kontrollkästchen über disabled="disabled" deaktivieren, ist es immer noch anklickbar. Ich habe die Farbe der label und die Farbe des label:before Elements erfolgreich geändert.

ABER:

Wenn ich auf der untauglichen Checkbox klicken, so lange (oder das Etikett, um genauer zu sein), als ich die MouseKey nach unten, einer anderen Farbe (in meinem Fall: schwarz) halte Shows oben - aber nur für das label:before -Element. Hier

ist der Code ein wenig mehr verdichteter:

input[type="checkbox"] 
{ 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 
    input[type="checkbox"] + label 
    { 
     position: relative; 
     top:-1px; 
     padding: 0px; 
     padding-left: 1.5em; 
     vertical-align: middle; 
     -webkit-user-select: none; 
     -moz-user-select: none; 
      -ms-user-select: none; 
       user-select: none; 
    } 
     input[type="checkbox"] + label:before 
     { 
      content: ''; 
      color: #F00; 
      position: absolute; 
      top: 50%; 
      left: 0; 
      width: 14px; 
      height: 14px; 
      margin-top: -9px; 
      border: 2px solid #006c39; 
      border-radius:4px; 
      text-align: center; 
     } 
     input[type="checkbox"] + label:after 
     { 
      content: ''; 
      background-color: #900; 
      position: absolute; 
      top: 50%; 
      left: 4px; 
      width: 10px; 
      height: 10px; 
      margin-top: -5px; 
      -webkit-transform: scale(0); 
       -ms-transform: scale(0); 
        transform: scale(0); 
      -webkit-transform-origin: 50%; 
       -ms-transform-origin: 50%; 
        transform-origin: 50%; 
      -webkit-transition: -webkit-transform 200ms ease-out; 
        transition: transform 200ms ease-out; 
     } 

     input[type="checkbox"] + label:after 
     { 
      background-color: transparent; 
      top: 50%; 
      left: 4px; 
      width: 8px; 
      height: 3px; 
      margin-top: -4px; 
      border-style: solid; 
      border-color: rgb(75,177,49); 
      border-width: 0 0 3px 3px; 
      -webkit-border-image: none; 
       -o-border-image: none; 
        border-image: none; 
      -webkit-transform: rotate(-45deg) scale(0); 
       -ms-transform: rotate(-45deg) scale(0); 
        transform: rotate(-45deg) scale(0); 
      -webkit-transition: none; 
        transition: none; 
     } 
    input[type="checkbox"]:checked + label:after 
    { 
     content: ''; 
     -webkit-transform: rotate(-45deg) scale(1); 
      -ms-transform: rotate(-45deg) scale(1); 
       transform: rotate(-45deg) scale(1); 
     -webkit-transition: -webkit-transform 200ms ease-out; 
       transition: transform 200ms ease-out; 
    } 

Code basiert auf einem Artikel auf maddesigns.de (in Deutsch):

http://maddesigns.de/individuelle-checkbox-radio-inputs-1396.html

der Code für Behinderte Kontrollkästchen:

input[type="checkbox"].inactive + label, 
input[type="checkbox"].inactive:focus + label, 
input[type="checkbox"].inactive:hover + label, 
input[type="checkbox"].inactive:active + label 
     { 
      color:#999; 
      border-color:#999; 
     } 
input[type="checkbox"].inactive + label::before, 
input[type="checkbox"].inactive:focus + label::before, 
input[type="checkbox"].inactive:hover + label::before, 
input[type="checkbox"].inactive:active + label::before 
      { 
       border-color:#999; 
       color:#999; 
      } 

Ich habe diehinzugefügtKlasse für alle deaktivierten Kontrollkästchen, so muss ich nicht über input[type="checkbox"]:disabled:active + label::before und dergleichen auswählen.

Also, keine Vorschläge, WIE könnte man die Farbe der label:before eines deaktivierten Kontrollkästchens auf mousedown ändern?

EDIT:

Die Wirkung zeigt sich in FireFox, Chrome, Opera und Android Webkit.

Der Effekt tut nicht zeigen in IE11, Safari (IOS) und fiddle.

Vielen Dank im Voraus.

Answer 1

In einer anderen CSS-Datei (die immer noch gilt) fand ich die folgende Styling:

input[type="checkbox"]:active + label:before 
{ 
    -webkit-transition-duration: 0; 
      transition-duration: 0; 
    -webkit-filter: brightness(0.2); 
      filter: brightness(0.2); 
} 

ich die Farbe den ganzen Tag ohne Wirkung ändern könnte, wenn die Filter alle Farben aus es entwässert.

Jetzt funktioniert es richtig - wie es sollte.