Ausführliche Erläuterung der Verwendung des CSS-Checkbox-Effekts

Dieses Mal werde ich Ihnen die Verwendung des CSS-Kontrollkästchens ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von CSS-Kontrollkästchen?

ImplementierungsideenDas 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.

Hintergrund

, und die Beschriftung ist im Grunde die gleiche wie p im Stil. Das Vorhandensein von „Symbol (E+F)“ ermöglicht uns die direkte Verwendung Standard-Kontrollkästchen von HTML, wodurch die Probleme bei der Auswahl der JS-Simulation entfallen.

demo

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

HTML-Code:

HTML-Konstruktion ist abgeschlossen, gefolgt vom entsprechenden CSS.

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

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

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

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

Für Neulinge, die CSS nicht kennen, kann die erste Reaktion zu diesem Zeitpunkt sein B. das p-Tag oder das span-Tag nach der Beschriftung verwenden, 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.

Auf den spezifischen Inhalt von Pseudoelementen werde ich hier nicht näher eingehen. (Eigentlich beschränkt sich mein Wissen über sie use. Ich kann das nicht einmal verstehen, also werde ich andere nicht in die Irre führen.)

Da Sie ::after verwenden können, um den Text des Etiketts zu simulieren, können Sie natürlich auch verwenden ::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;
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von CSS Selector

Detaillierte Erläuterung der besonderen Verwendungsfähigkeiten von CSS Marge

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung des CSS-Checkbox-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!