Comment Styler une Case à Cocher Avec CSS
La case à cocher est l'une des formulaires HTML utilisée dans chaque site web, mais surtout elles ne sont pas stylisées et ont la même apparence. Si vous voulez rendre votre site plus attractif pour les utilisateurs, vous pouvez simplement styler votre cases à cocher. Si vous ne connaisez pas comment le faire, maintenant nous allons créer un exemple ensemble pas-à-pas, en utilisant seul CSS.
1. Créez HTML
Premièrement, nous devons avoir un code HTML, comme cela:
<section>
<h3>Comment styler une case à cocher</h3>
<div class="checkbox-example">
<input type="checkbox" value="1" id="checkboxOneInput"/>
<label for="checkboxOneInput"></label>
</div>
</section>2. Créez CSS
Maintenant nous allons commencer par notre code CSS. Comme nous allons changer le style des cases à cocher, la première chose à faire est masquer toutes les cases à cocher initiales. Pour le faire, nous devons définir la propriété visibility à sa valeur “hidden”:
/**
* Commencez par masquer toutes les cases à cocher
*/
input[type="checkbox"] {
visibility: hidden;
}Comme vous le voyez dans notre code HTML, nous avons ajouté un élément HTML label. Lorsque vous cliquez sur le label avec l'attribut “for”, cela vérifie la case à cocher, donc nous pouvons donner un certain style au label pour traiter les événements de clic pour notre cases à cocher.
Il existe aussi une classe CSS :checked pour voir si la case est vérifiée:
input[type="checkbox"]:checked{
quelque code
}Nous allons styler la case à cocher comme une barre de défilement, alors premièrement nous devons styler la barre. Cela va être un élément div autour de la case à cocher:
/**
* la barre de défilement
*/
.checkbox-example {
width: 45px;
height: 15px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 5px;
}Maintenant nous allons styler le label pour qu'il agisse en tant qu'unbutton sur la barre. Comme cela doit défiler d'un côté à l'autre, nous pouvons obtenir cet effet en ajoutant une transition au label, comme ça:
/**
* la barre du label
*/
.checkbox-example label {
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
transition: all 0.5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
}Maintenant la barre est à la position désactivé. Pour déplacer la barre de défilement, nous devons savoir si la case à cocher est vérifiée. Quand elle est vérifiée, nous devons changer la propriété left pour l'élément label:
/**
* Déplacer la barre si la case à cocher est cliquée
*/
.checkbox-example input[type="checkbox"]:checked + label {
left: 27px;
}Comme vous le voyez dans le code ci-dessus, nous utilisons le combinateur + pour sélectionner la soeur du label, à côté de lui.
Maintenant nous allons combiner tout ça dans un code et nous allons avoir la case à cocher prête.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
input[type="checkbox"] {
visibility: hidden;
}
.checkbox-example {
width: 45px;
height: 15px;
background: #555;
margin: 20px 10px;
position: relative;
border-radius: 5px;
}
.checkbox-example label {
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
transition: all 0.5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
}
.checkbox-example input[type="checkbox"]:checked + label {
left: 27px;
}
</style>
</head>
<body>
<h2>Comment styler une case à cocher</h2>
<section>
<div class="checkbox-example">
<input type="checkbox" value="1" id="checkboxOneInput" />
<label for="checkboxOneInput"></label>
</div>
</section>
</body>
</html>Maintenant nous déjà connaissons les astuces de styler, nous pouvons voir quelques autres exemples:
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
h1 {
color: orange;
}
/* Hiding the initial checkbox */
input[type="checkbox"] {
visibility: hidden;
}
/* Creating a custom checkbox based on demand */
.w3docs {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: black;
}
/* Specify the background color to be shown when hovering over checkbox */
.main:hover input ~ .w3docs {
background-color: gray;
}
/* Specify the background color to be shown when checkbox is active */
.main input:active ~ .w3docs {
background-color: white;
}
/* Specify the background color to be shown when checkbox is checked */
.main input:checked ~ .w3docs {
background-color: orange;
}
/* Checkmark to be shown in checkbox */
/* It is not be shown when not checked */
.w3docs:after {
content: "";
position: absolute;
display: none;
}
/* Display checkmark when checked */
.main input:checked ~ .w3docs:after {
display: block;
}
/* Styling the checkmark using webkit */
/* Rotated the rectangle by 45 degree and showing only two border to make it look like a tickmark */
.main .w3docs:after {
left: 8px;
bottom: 5px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 4px 4px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>
Apprenez à faire le désign et construire un site Web professionel
</h1>
<label class="main">
CodeX
<input type="checkbox" />
<span class="w3docs"></span>
</label>
<label class="main">
W3Docs
<input type="checkbox" checked="checked" />
<span class="w3docs"></span>
</label>
<label class="main">
CodeY
<input type="checkbox" />
<span class="w3docs"></span>
</label>
</body>
</html>Voyons un autre exemple.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Stylez une case à cocher à l'aide de CSS</title>
<style>
h1 {
color: #8ebf42;
}
.script {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
/* Hide the default checkbox */
input[type="checkbox"] {
visibility: hidden;
}
/* creating a custom checkbox based on demand */
.w3docs {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: black;
}
/* specify the background color to be shown when hovering over checkbox */
.script:hover input ~ .w3docs {
background-color: orange;
}
/* specify the background color to be shown when checkbox is active */
.script input:active ~ .w3docs {
background-color: red;
}
/* specify the background color to be shown when checkbox is checked */
.script input:checked ~ .w3docs {
background-color: black;
}
/* checkmark to be shown in checkbox */
/* It is not be shown when not checked */
.w3docs:after {
content: "";
position: absolute;
display: none;
}
/* display checkmark when checked */
.script input:checked ~ .w3docs:after {
display: block;
}
/* styling the checkmark using webkit */
/* creating a square to be the sign of checkmark */
.script .w3docs:after {
left: 6px;
bottom: 5px;
width: 6px;
height: 6px;
border: solid white;
border-width: 4px 4px 4px 4px;
}
</style>
</head>
<body>
<h1>Aimez-vous le W3Docs?</h1>
<label class="script" style="color: black;">
Oui
<input type="checkbox" />
<span class="w3docs"></span>
</label>
<label class="script" style="color: black;">
Oui, biensûr
<input type="checkbox" checked="checked" />
<span class="w3docs"></span>
</label>
</body>
</html>