Bonjour,
J'ai suivi votre video sur les deux checkbox personnalisables. Je me suis mis à l'oeuvre de les comprendre et les faire aussi de mon côté sans Compass ou Sass ou autre machin du style. J'ai réussi le 1er checkbox. Cependant, lors du 2e j'ai eu un petit problème lors de sa création : "https://www.youtube.com/watch?v=UsBBEE0Njzo#t=710s"
Voici mon code
Partie HTML :
<!DOCTYPE html>
<html>
<head>
<title>Checkbox</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="checkbox2.css">
</head>
<body>
<div>
<label for="test" class="checkbox">
<input type="checkbox" id="test" class="checkbox">
<span class="switch">
<span class="on">OUI</span>
<span class="mid"></span>
<span class="off">NON</span>
</span>
Hey salut coche cette case !
</label>
</div>
</body>
</html>
Partie CSS :
.checkbox input{
display: none;
}
.switch{
display: inline-block;
width: 130px;
}
.switch .on, .switch .off {
display: inline-block;
float: left;
background-color: #27ae60; //couleur verte
width: 50%;
height: 20px;
}
Le problème est le suivant : Je voulais styliser le span avec la classe switch et lui donner une largeur de 130px. Je voulais aussi que mes deux span : on et off puisse prendre 50% de la largeur de .switch .Seulement, lorsque j'applique ce code, les deux on et off prennent 50 % d'une largeur inconnue, j'ai mis 400px pour voir et rien n'y fait...
Au plaisir de vous entendre :)
Lens Durandisse
Lens Durandisse