Explication détaillée de l'utilisation de l'effet de case à cocher CSS

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de l'effet de case à cocher CSS. Quelles sont les précautions lors de l'utilisation de la case à cocher CSS ?

Idées d'implémentation

Le principal moyen d'implémentation du CSS pur 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

arrière-plan, et l'étiquette est fondamentalement la même que p dans le style. L'existence du "symbole (E+F)" nous permet de l'utiliser directement. la case à cocher par défaut de HTML, éliminant les problèmes de sélection de simulation js.

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

Code HTML :

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

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

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

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

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

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.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation du sélecteur CSS

Explication détaillée des compétences d'utilisation particulières du CSS marge

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!