Maison >interface Web >tutoriel CSS >Explication graphique et textuelle détaillée de l'embellissement du style de sélection unique et de sélection de chèques
Explication graphique et textuelle détaillée de l'embellissement du style de sélection unique et de sélection de chèques
- php中世界最好的语言original
- 2018-03-22 13:10:161889parcourir
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>
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!