Explication graphique et textuelle détaillée de l'embellissement du style de sélection unique et de sélection de chèques-tutoriel CSS-php.cn

Explication graphique et textuelle détaillée de l'embellissement du style de sélection unique et de sélection de chèques

php中世界最好的语言

Libérer： 2018-03-22 13:10:16

original

1846 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée en image et en texte de l'embellissement des styles à sélection unique et à sélection multiple NotesIl y a lesquels, voici des cas pratiques, jetons-y un coup d'œil.

Avant-propos

Je crois que tout le monde sait que dans les éléments de formulaire, bouton radio et bouton à cocher Les deux ont États sélectionnés et non sélectionné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 venir apprendre ensemble.

Le rendu est le suivant

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 le sélecteur adjacent de CSS.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation CSS de la barre de navigation de premier niveau

Explication détaillée de l'utilisation du dégradé linéaire

Malentendus courants dans l'utilisation du CSS et du HTML

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!