So passen Sie den Kontrollkästcheneffekt mit CSS und HTML an

Das Kontrollkästchen sollte eine häufiger verwendete HTML-Funktion sein, aber das mit dem Browser gelieferte Kontrollkästchen sieht oft nicht sehr gut aus und der Effekt ist in verschiedenen Browsern unterschiedlich. Im Folgenden werde ich Ihnen den Effekt von CSS+HTML vorstellen Benutzerdefiniertes Kontrollkästchen, werfen wir einen Blick darauf Mal sehen

Das Kontrollkästchen sollte eine relativ häufige HTML-Funktion sein, aber das mit dem Browser gelieferte Kontrollkästchen 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. Hier finden Sie eine Zusammenfassung der Implementierungsmethoden.

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 Webkit-basierten Browser 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>

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

Die Wirkung des obigen Codes ist wie folgt und scheint in Ordnung zu sein.

Aber wenn man genau darüber nachdenkt, scheint etwas zu fehlen: der Eingabeaufforderungstext, der der Option entspricht

Für Neulinge, die kein CSS kennen, ist die erste Reaktion bei Dieses Mal kann es sein, das p-Tag nach der Beschriftung zu verwenden oder das span-Tag, 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 Ich kann das nicht einmal verstehen, also werde ich andere nicht in die Irre führen.)

/* Die Wirkung von Pseudoelementen ist sehr einfach, definieren Sie einfach „Inhalt“ und die anderen Attribute sind die gleichen wie gewöhnliches 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;
}

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über HTML Textformatierungscode

CSS Einführung in die Verwendung des Border-Attributs solide

So verwenden Sie CSS Das Übergangsattribut implementiert das WeChat-Applet-Widget mit animierter Anzeige und Ausblendung

Das obige ist der detaillierte Inhalt vonSo passen Sie den Kontrollkästcheneffekt mit CSS und HTML an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!