Comment changer les styles de radio et de case à cocher par défaut avec CSS-tutoriel php-php.cn

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

不言

Libérer： 2023-04-03 10:18:01

original

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

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=&#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!