Detaillierte Erläuterung der benutzerdefinierten Kontrollkästcheneffekte von CSS und HTML

Checkbox sollte eine relativ häufige HTML-Funktion sein, aber die mit dem Browser gelieferte Checkbox sieht oft nicht sehr gut aus und die Effekte sind in verschiedenen Browsern unterschiedlich. Aus der Notwendigkeit heraus, visuelle Effekte zu verschönern und zu vereinheitlichen, wurde die Anpassung des Kontrollkästchens vorgeschlagen. Dieser Artikel zeigt Ihnen hauptsächlich die Wirkung des benutzerdefinierten CSS+HTML-Kontrollkästchens.

Implementierungsideen

Das Hauptmittel der reinen CSS-Implementierung ist die Verwendung der Simulationsfunktion des Label-Tags. Das for-Attribut des Labels kann einem bestimmten Eingabeelement zugeordnet werden. Auch wenn die Eingabe selbst für den Benutzer nicht sichtbar ist, kann der Benutzer die native Eingabe direkt ersetzen, indem er mit dem Label-Label interagiert. und das gibt uns Stilsimulation lässt Raum. Kurz gesagt,

verbirgt die native Eingabe und überlässt den Stildefinitionsprozess der Beschriftung (warum ändern Sie dann nicht direkt den Stil des Kontrollkästchens? Da das Kontrollkästchen die Standardkomponente des Browsers ist, sind Stiländerungen nicht so praktisch Als Beschriftung haben viele Attribute keine Auswirkung auf Kontrollkästchen, wie z. B. den Hintergrund, und die Beschriftung ist im Stil im Wesentlichen mit p identisch. „Die Existenz von“ ermöglicht es uns, das Standard-Kontrollkästchen von HTML direkt zu verwenden, wodurch die Probleme bei der Auswahl von js-Simulationen entfallen.

demo

Einige CSS3-Attribute von DEMO haben nur ein Webkit-Präfix, daher wird empfohlen, zum Anzeigen dieser Seite einen Browser mit Webkit-Kern zu verwenden

HTML-Code:

<p class="wrap">
    <!-- `input`的id必须有，这个是label进行元素匹配所必需的 -->
    <!-- 可以看到每个input的id和label的“for”属性对应同一字符串 -->
<input type="checkbox" id="checkbox01" />
<label for="checkbox01"></label>
<input type="checkbox" id="checkbox02" />
<label for="checkbox02"></label>
<input type="checkbox" id="checkbox03" />
<label for="checkbox03"></label>
<input type="checkbox" id="checkbox04" />
<label for="checkbox04"></label>

Die HTML-Konstruktion ist abgeschlossen, als nächstes folgt das entsprechende CSS.

.wrap {
  width: 500px;
  background-color: #EEE;
  border: 2px solid #DEF;
}
/* 隐藏所有checkbox */
input[type='checkbox'] {
  display: none;
}
/* 对label进行模拟.背景图片随便拼凑的，不要吐槽品味*/
/*   transition效果是做个背景切换效果，这里单纯演示而已，实际上这个过渡不加更自然*/
label {
  display: inline-block;
  width: 60px;
  height: 60px;
  position: relative;
  background: url(//www.chitanda.me/images/blank.png);
  background-position: 0 0px;
  -webkit-transition: background 0.5s linear;
}
/*  利用相邻选择符和checkbox`:checked`的状态伪类来模拟默认选中效果（就是点击后那个勾号的效果）  */
/*如果这段代码注释，点击后将没有任何反馈给用户*/
/*因为label本身是没有点击后被选中的状态的，checkbox被隐藏后，这个状态只能手动模拟*/
input[type='checkbox']:checked+label {
  background-position: 0 -60px;
}

Der obige Code hat folgende Auswirkung und scheint in Ordnung zu sein.

Aber wenn man genau darüber nachdenkt, scheint es, dass etwas fehlt: der Eingabeaufforderungstext, der der Option entspricht

Neulinge, die CSS nicht kennen, reagieren möglicherweise zu diesem Zeitpunkt zunächst auf die Verwendung von p Tag oder Span-Tag nach dem Label, um Text hinzuzufügen. Dieser Ansatz ist jedoch nicht sehr elegant. Persönlich empfehle ich die Verwendung der CSS-Pseudoelemente ::before und ::after (::before und :before sind dasselbe. Um jedoch „Pseudoelemente“ von „Pseudoklassen“ zu unterscheiden, empfahl das W3C das Schreiben Methode besteht darin, :: für Pseudoelemente zu verwenden). deren Verwendung. Ich kann das nicht einmal verstehen, also werde ich andere nicht in die Irre führen.)

Da Sie natürlich auch ::after verwenden können, um den Text des Etiketts zu simulieren Verwenden Sie ::before, um den Kontrollkästchenstil des Etiketts zu simulieren, der hier nicht analysiert wird.

/* 伪元素的生效很简单，定义`content`就好，其余的属性和普通p一样 */
label::after {
   content: attr(data-name);
   /*利用attr可以减少css代码量,data-name写在html部分的label属性里*/
  display: inline-block;
  position: relative;
  width: 120px;
  height: 60px;
  left: 100%;
  vertical-align: middle;
  margin: 10px;
}

Verwandte Empfehlungen:

Eine einfache Möglichkeit, Kontrollkästchen, Radios, Optionsfelder und Schiebeschaltflächen mit reinem CSS-Code zu verschönern

jQuery-Betrieb im Detail Erläuterung der CheckBox-Methodenbeispiele

Über die ausgewählte CheckBox-Stileinstellung in HTML

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der benutzerdefinierten Kontrollkästcheneffekte von CSS und HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!