Exemple d'effet personnalisé de case à cocher en 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. Voici un résumé des méthodes de mise en œuvre.

Idée d'implémentation

Le principal moyen d'implémentation CSS pure est d'utiliser la fonction de simulation de la balise label. L'attribut label de for peut être associé à un élément input spécifique Même si le input lui-même n'est pas visible par l'utilisateur, avec un label correspondant, l'utilisateur peut directement interagir avec le tag. pour remplacer le natif label - et cela laisse de la place à notre émulation de style. En bref, input

masque l'entrée native et laisse le processus de définition du style à

(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, il y a aucun changement de style L'étiquette est si pratique, de nombreux attributs n'ont aucun effet sur label, comme checkbox, et background est fondamentalement le même que div en termes de style, en raison de l'existence de. le "sélecteur adjacent (E+F)" de CSS, nous pouvons utiliser directement la case à cocher par défaut de HTML, éliminant ainsi les problèmes de sélection simulée par js. label

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 :

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

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

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 l'utiliser après la balise

ou la balise pour ajouter du texte. Mais cette approche n’est pas très élégante. Personnellement, je recommande d'utiliser les pseudo-éléments CSS
et label (p et span sont la même chose. Cependant, afin de distinguer les « pseudo-éléments » des « pseudo-classes », le W3C a recommandé La façon d'écrire des pseudo-éléments est d'utiliser ::beforeLes pseudo-classes utilisent ::after) ::before Je n'entrerai pas ici dans les détails sur le contenu spécifique des pseudo-éléments (en fait, ma connaissance d'eux se limite à leur utilisation. . Je ne comprends pas cela, donc je ne vais pas vous induire en erreur.:before:::

Bien sûr, puisque vous pouvez utiliser

pour simuler le texte de l'étiquette, vous peut également utiliser

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

pour simuler le style de case à cocher de

, ce que je ne ferai pas ici.

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!