Explication détaillée des effets de cases à cocher personnalisées CSS et HTML

La case à cocher devrait être une fonction HTML relativement courante, mais la case à cocher fournie avec le navigateur n'est souvent pas très belle et les effets sont différents selon les navigateurs. Par souci d'embellir et d'unifier les effets visuels, la personnalisation des cases à cocher a été proposée. Cet article partage principalement avec vous l'effet de la case à cocher personnalisée CSS+HTML. Jetons un coup d'œil. J'espère que cela pourra vous aider.

Idées d'implémentation

Le principal moyen d'implémentation CSS pure est d'utiliser la fonction de simulation de la balise label. L'attribut for de label peut être associé à un élément d'entrée spécifique Même si l'entrée elle-même n'est pas visible par l'utilisateur, une fois qu'il existe une étiquette qui lui correspond, l'utilisateur peut directement remplacer l'entrée native en interagissant avec l'étiquette d'étiquette -. et cela nous donne la simulation de style qui laisse de la place. En bref,

masque l'entrée native et laisse le processus de définition du style à l'étiquette (alors pourquoi ne pas changer directement le style de la case à cocher ? Parce que la case à cocher est le composant par défaut du navigateur, les changements de style ne sont pas aussi pratiques comme étiquette, et de nombreux attributs n'ont aucun effet sur les cases à cocher, telles que l'arrière-plan, et l'étiquette est fondamentalement la même que p dans le style. "L'existence de" nous permet d'utiliser directement la case à cocher par défaut du HTML, éliminant ainsi les problèmes de sélection de simulation js. .

démo

Certains attributs CSS3 de DEMO n'ont que le préfixe webkit, il est donc recommandé d'utiliser un navigateur avec le noyau webkit pour afficher cette page

Code HTML :

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

La construction HTML est terminée, vient ensuite le CSS correspondant.

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

L'effet du code ci-dessus est le suivant, et il semble être OK.

Mais si vous y réfléchissez bien, il semble qu'il manque quelque chose : le texte d'invite correspondant à l'option

Les débutants qui ne connaissent pas CSS peuvent d'abord réagir à ce moment-là pour utiliser p balise ou balise span après l’étiquette pour ajouter du texte. Mais cette approche n’est pas très élégante. Personnellement, je recommande d'utiliser les pseudo-éléments CSS ::before et ::after (::before et :before sont la même chose. Cependant, afin de distinguer les « pseudo-éléments » des « pseudo-classes », le W3C a recommandé d'écrire la méthode est d'utiliser :: pour les pseudo-éléments). Et les pseudo-classes sont utilisées :)

Je n'entrerai pas ici dans les détails sur le contenu spécifique des pseudo-éléments (en fait, ma connaissance à leur sujet se limite à. leur utilisation. Je ne comprends même pas cela, donc je ne vais pas induire les autres en erreur.)

/* 伪元素的生效很简单，定义`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;
}

Bien sûr, puisque vous pouvez utiliser ::after pour simuler le texte de l'étiquette, vous pouvez aussi utilisez ::before pour simuler le style de case à cocher de l'étiquette, qui ne sera pas analysé ici.

Recommandations associées :

Un moyen simple d'embellir les cases à cocher, les boutons radio et les boutons coulissants avec du code CSS pur

Fonctionnement jQuery détaillé explication des exemples de méthodes CheckBox

À propos du paramètre de style sélectionné CheckBox en html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!