Cet article explique avec vous comment modifier les styles de radio et de case à cocher par défaut avec CSS. Le contenu est très bon. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
Utilisez la pseudo-classe d'étiquette CSS (::before) pour remplacer la case à cocher et les effets radio :
Avantages : Des images sont nécessaires pour ajuster les styles avant et après sélection CSS pur
Inconvénients : Compatibilité, non pris en charge sous IE8
Code :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css改变默认的radio和checkbox的样式</title> <style> input[type="radio"], input[type='checkbox'] { display: none; } input[type='radio']+label::before, input[type='checkbox']+label::before { content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 6px; border-radius: 100%; vertical-align: middle; border: 1px solid #E4E4E4; background: #FFFFFF; background-image: url('https://i.loli.net/2018/07/20/5b517d0bf066a.png'); background-position: 0px 0px; } input[type='radio']:hover+label::before, input[type='checkbox']:hover+label::before { background-position: -15px 0px; } input[type='radio']:checked+label::before, input[type='checkbox']:checked+label::before { background-position: -15px -15px; } </style> </head> <body> <p>单选框</p> <input type="radio" name="sex" value="man" id="man" checked> <label for="man">男</label> <input type="radio" name="sex" value="female" id="female"> <label for="female">女</label> <p>多选框</p> <input type="checkbox" name="fruits" value="apple" id="apple" checked> <label for="apple">苹果</label> <input type="checkbox" name="fruits" value="orange" id="orange"> <label for="orange">橙子</label> </body> </html>
Recommandations associées :
Comment implémenter la technologie d'assemblage d'images avec Css Sprite
Comment définir un effet de bordure pour une image via l'attribut de bordure CSS
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!