Comment personnaliser le style des cases à cocher avec CSS ? Cet article vous expliquera comment utiliser CSS pour modifier le style de case à cocher natif et personnaliser le style de case à cocher. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Jetons d'abord un coup d'oeil à l'effet
Principe
1. Utilisez l'apparence des attributs CSS3.
Cet attribut (force) change (change) le style (natif) par défaut.
Firefox prend en charge l'attribut alternatif -moz-apparence ; Safari et Chrome prennent en charge l'attribut alternatif -webkit-apparence ; IE ne prend pas en charge cet attribut.
Vous pouvez donc utiliser cet attribut pour annuler le style natif de la case à cocher.
2. Utiliser : sélecteur coché
Modifiez le style lorsque la case est cochée.
3. :after selector + content attribut
:after selector insère du contenu après l'élément.
Nous utilisons simplement text-aligen et line-height pour centrer le contenu.
Exemple de code :
nbsp;html> <meta> <title>checkbox</title> <style> input { width: 16px; height: 16px; margin-top: 0; background-color: #fff; border: 1px solid #c9c9c9; border-radius: 2px; color: #fff; text-align: center; line-height: 15px; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; outline: none; } input:hover { border-color: #43adea; } input:checked { color: #fff; background-color: #43adea; border: 1px solid #43adea; } input:after { content: "✔"; } </style> <input> <input>
Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo CSS !
Recommandations associées :
Tutoriel vidéo de formation sur le bien-être public php
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!