Comment personnaliser l'effet de la case à cocher avec CSS et HTML

La case à cocher devrait être une fonction HTML plus couramment utilisée, mais la case à cocher fournie avec le navigateur n'est souvent pas très belle et l'effet est différent selon les navigateurs. Ci-dessous, je partagerai avec vous l'effet de CSS+HTML. case à cocher personnalisée, jetons un coup d'oeil Voyons voir

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. Voici un résumé des méthodes de mise en œuvre.

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 l'étiquette 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. .

demo

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

<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 on y réfléchit bien, il semble qu'il manque quelque chose : le texte d'invite correspondant à l'option

Pour les nouveaux arrivants qui ne connaissent pas CSS, la première réaction à cette fois, vous pouvez utiliser la balise p après l'étiquette ou la balise span 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 n'induirai pas les autres en erreur.)

/* L'effet du pseudo-élément est très simple, il suffit de définir `contenu`, et l'autre. les attributs sont les mêmes que 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, puisqu'il peut être utilisé : ::after simule le texte de l'étiquette, alors vous pouvez utiliser ::before pour simuler le style de case à cocher du label, qui ne sera pas analysé ici.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos du HTML Code de formatage du texte

CSS Introduction à l'utilisation de l'attribut solide de Border

Comment utiliser CSS L'attribut de transition implémente le widget d'applet WeChat avec affichage et masquage animés

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!