Utilisez CSS3 pour embellir le style d'affichage des boutons radio et cocher-tutoriel CSS-php.cn

Utilisez CSS3 pour embellir le style d'affichage des boutons radio et cocher

高洛峰

Libérer： 2017-02-11 13:49:31

original

1385 Les gens l'ont consulté

Comme nous le savons tous, le style natif du premier élément du formulaire n'est pas très beau et doit être optimisé lorsqu'il est utilisé dans des projets. L'article suivant présente principalement comment utiliser CSS3 pour embellir le style d'affichage de la radio. et cochez les boutons Amis qui en ont besoin Vous pouvez l'utiliser comme référence, jetons un coup d'œil ci-dessous.

Préface

Je crois que tout le monde sait que dans les éléments de formulaire, les boutons radio et les boutons à cocher ont des états sélectionnés et non cochés. Il est difficile de remplacer les styles par défaut de ces deux boutons. En CSS3, nous pouvons implémenter des styles personnalisés via le sélecteur de statut ":checked" et d'autres balises. En utilisant CSS3, nous pouvons créer un formulaire utilisateur très personnalisé. L'effet obtenu dans cet article est très bon. Les amis intéressés peuvent apprendre ensemble ci-dessous.

Le rendu est le suivant

Utilisez CSS3 pour embellir le style daffichage des boutons radio et cocher

Exemple de code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选单选样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    form {
      border: 1px solid #ccc;
      padding: 20px;
      width: 300px;
    }
    .wrapper {
      margin-bottom: 10px;
    }
    /*复选框*/
    .checkbox-box {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      position: relative;
      border: 2px solid orange;
      vertical-align: middle;
    }
    .checkbox-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      z-index:10;
    }
    .checkbox-box span {
      position: absolute;
      top: -10px;
      right: 3px;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial;
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      color: orange;
    } 
    .checkbox-box input[type="checkbox"] + span {
      opacity:0;
    }
    .checkbox-box input[type="checkbox"]:checked + span {
      opacity: 1;
    }

    /*单选框*/
    .redio-box {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 10px;
      position: relative;
      background: orange;
      vertical-align: middle;
      border-radius: 100%;
    }
    .redio-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height:100%;
      z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
    }
    .redio-box span { 
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      position: absolute;
      background: #fff;
      top: 50%;
      left:50%;
      margin: -5px 0  0 -5px;
      z-index:1;
    }
    .redio-box input[type="radio"] + span {
      opacity: 0;
    }
    .redio-box input[type="radio"]:checked + span {
      opacity: 1;
    }
</style>
<body>
<h2>复选框：</h2>
<form action="#">

  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox" checked id="usename" />
      <span>√</span>
    </p>
    <label for="usename">体育</label>
  </p>
  
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"  id="usepwd" />
      <span>√</span>
    </p>
    <label for="usepwd">音乐</label>
  </p>

  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"  id="checkbox3" />
      <span>√</span>
    </p>
    <label for="checkbox3">读书</label>
  </p>
  
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"   id="checkbox4" />
      <span>√</span>
    </p>
    <label for="checkbox4">运动</label>
  </p>

</form> 


<h2>单选框</h2>
<form action="#">
  <p class="wrapper">
    <p class="redio-box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </p>
    <label for="boy">男</label>
  </p>
  
  <p class="wrapper">
    <p class="redio-box">
      <input type="radio"  id="girl" name="1" /><span></span>
    </p>
    <label for="girl">女</label>
  </p>
</form> 

</body>
</html>

Copier après la connexion

Remarque :

est une sélection adjacente du symbole CSS.

Il n'existe que quatre types de sélecteurs de relations, qui sont des espaces > ~ (y compris les sélecteurs, les sous-sélecteurs, les sélecteurs adjacents et les sélecteurs frères)

Plus d'utilisation de CSS3 pour embellir Pour les articles liés au style d'affichage de la sélection radio et des boutons de contrôle, veuillez faire attention au site Web PHP chinois !