Kontrollkästchen „CSS-Verschönerung'.-HTML-Tutorial-php.cn

Kontrollkästchen „CSS-Verschönerung'.

WBOY

Freigeben： 2016-09-27 14:05:20

Original

1581 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>;
  }

Nach dem Login kopieren

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>

Nach dem Login kopieren

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