Kontrollkästchen „CSS-Verschönerung'.

Heute möchte ich Ihnen eine Möglichkeit vorstellen, das Bild zu verschönern, ohne das Kontrollkästchen zu verwenden. Werfen wir einen Blick auf die Renderings. Im Folgenden sind die Effekte in drei verschiedenen Zuständen aufgeführt:

1. HTML-Struktur

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="check-wrap"</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="icheck"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="icheck"</span> <span style="color: #0000ff;">/></span>
     <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="icheck"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="ilabel"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Hinweis: Der for-Attributwert des Label-Tags muss als ID-Name der Eingabe angegeben werden.

2. CSS-Code

<span style="color: #800000;">.check-wrap</span>{<span style="color: #ff0000;">
     position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
     height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;"> 24px</span>;
}<span style="color: #800000;">
.icheck</span>{<span style="color: #ff0000;">
     opacity</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.ilabel</span>{<span style="color: #ff0000;">        
     border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">    
     cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
     display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
     position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
     top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
     left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
     height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.ilabel:after</span>{<span style="color: #ff0000;">
     content</span>:<span style="color: #0000ff;"> " "</span>;<span style="color: #ff0000;">
     border</span>:<span style="color: #0000ff;"> 2px solid #DDD</span>;<span style="color: #ff0000;">        
     display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
     font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
     text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
     border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
     height</span>:<span style="color: #0000ff;"> 20px</span>;
 }<span style="color: #800000;">
 .icheck:checked + .ilabel:after</span>{<span style="color: #ff0000;">
     content</span>:<span style="color: #0000ff;"> "✓"</span>;<span style="color: #ff0000;">
     border-color</span>:<span style="color: #0000ff;"> #3f51b5</span>;<span style="color: #ff0000;">
     background-color</span>:<span style="color: #0000ff;"> #3f51b5</span>;<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;"> #fff</span>;
  }<span style="color: #800000;">
  .icheck:indeterminate + .ilabel:after</span>{<span style="color: #ff0000;">
     content</span>:<span style="color: #0000ff;"> "■"</span>;<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;"> #3f51b5</span>;<span style="color: #ff0000;">
     background-color</span>:<span style="color: #0000ff;"> #FFF</span>;<span style="color: #ff0000;">
     border-color</span>:<span style="color: #0000ff;"> #3f51b5</span>;
  }

1. Setzen Sie die ursprüngliche Eingabe-Tag-Transparenz auf 0

2. Die Breite und Höhe von label:after sind auf 20 Pixel eingestellt, da der Rand 4 Pixel einnimmt

3. Der unbestimmte Status des Kontrollkästchens wird möglicherweise weniger von allen verwendet (der zweite Status im Rendering) und kann nur über js festgelegt werden. Diese Situation wird normalerweise in Baumstrukturen verwendet (dh: untergeordnete Knoten werden ausgewählt, aber die Status des übergeordneten Knotens, wenn nicht alle ausgewählt sind)

<script>
     <span style="color: #0000ff;">var</span> icheck = document.getElementById("icheck"<span style="color: #000000;">);
     icheck.indeterminate </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
</span></script>

Die Menge an Code ist wirklich gering, wenn Sie es nicht verstehen, hinterlassen Sie bitte eine Nachricht, danke.... :)