Comment changer les styles de radio et de case à cocher par défaut avec CSS

不言
Libérer: 2023-04-03 10:18:01
original
1894 Les gens l'ont consulté

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 :

  1. Avantages : Des images sont nécessaires pour ajuster les styles avant et après sélection CSS pur

  2. 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=&#39;checkbox&#39;] {
      display: none;
    }

    input[type=&#39;radio&#39;]+label::before,
    input[type=&#39;checkbox&#39;]+label::before {
      content: &#39;&#39;;
      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(&#39;https://i.loli.net/2018/07/20/5b517d0bf066a.png&#39;);
      background-position: 0px 0px;
    }

    input[type=&#39;radio&#39;]:hover+label::before,
    input[type=&#39;checkbox&#39;]:hover+label::before {
      background-position: -15px 0px;
    }

    input[type=&#39;radio&#39;]:checked+label::before,
    input[type=&#39;checkbox&#39;]: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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal