Beispiel für einen benutzerdefinierten Effekt eines Kontrollkästchens in 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. Hier finden Sie eine Zusammenfassung der Implementierungsmethoden.

Implementierungsidee

Das Hauptmittel der reinen CSS-Implementierung ist die Verwendung der Simulationsfunktion des label-Tags. Das label-Attribut von for kann einem bestimmten input-Element zugeordnet werden. Auch wenn das input selbst für den Benutzer nicht sichtbar ist, kann der Benutzer mit einem entsprechenden label direkt mit dem -Tag, um das native label zu ersetzen – und das lässt Raum für unsere Stilemulation. Kurz gesagt: input

verbirgt die native Eingabe und überlässt den Stildefinitionsprozess

(warum ändern Sie dann nicht direkt den Stil des Kontrollkästchens? Da das Kontrollkästchen die Standardkomponente des Browsers ist, gibt es diese Keine Änderung im Stil. Label ist so praktisch, dass viele Attribute keine Auswirkung auf label haben, wie z. B. checkbox, und background im Hinblick auf den Stil im Grunde mit div identisch ist Mit dem „benachbarten Selektor (E + F)“ von CSS können wir direkt das Standard-Kontrollkästchen von HTML verwenden, wodurch die Probleme mit der simulierten Auswahl von js entfallen. label

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:

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

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

Neulinge, die CSS nicht kennen, reagieren möglicherweise zu diesem Zeitpunkt zuerst um es nach dem Tag

oder dem Tag zum Hinzufügen von Text zu verwenden. Dieser Ansatz ist jedoch nicht sehr elegant. Persönlich empfehle ich die Verwendung von CSS-Pseudoelementen
und label (p und span sind dasselbe. Um jedoch „Pseudoelemente“ von „Pseudoklassen“ zu unterscheiden, empfiehlt das W3C Die Art und Weise, Pseudoelemente zu schreiben, ist die Verwendung von ::beforePseudoklassen verwenden ::after) ::before Ich werde hier nicht näher auf den spezifischen Inhalt von Pseudoelementen eingehen (eigentlich beschränkt sich mein Wissen über sie auf ihre Verwendung . Ich verstehe das nicht, also werde ich dich nicht in die Irre führen. :before:::

Natürlich kannst du

verwenden, um Etikettentext zu simulieren Verwenden Sie auch

/* 伪元素的生效很简单，定义`content`就好，其余的属性和普通div一样 */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;
}

, um den Kontrollkästchenstil von

zu simulieren, was ich hier nicht tun werde.

Das obige ist der detaillierte Inhalt vonBeispiel für einen benutzerdefinierten Effekt eines Kontrollkästchens in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!