Modifier checkboxs sur une seule partie de la page
XtremeOne
Messages postés
2
Statut
Membre
-
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'apprends le HTML/CSS et j'ai modifié une checkbox (CSS). Mon probleme est que je ne veux en modifier qu'une alors que toutes les checkbox de la page se modifient.
Comment ne modifier qu'une checkbox par page ?
Merci.
J'apprends le HTML/CSS et j'ai modifié une checkbox (CSS). Mon probleme est que je ne veux en modifier qu'une alors que toutes les checkbox de la page se modifient.
Comment ne modifier qu'une checkbox par page ?
Merci.
1 réponse
-
Bonjour,
Ta question concernant le html/css je déplace dans le bon forum.
Ensuite.... sans voir ton code IMPOSSIBLE de te répondre exactement.....
La seule chose que je peux te dire c'est qu'en CSS tu peux cibler un élément via son ID ou via une CLASS
par exemple :.machkb{ //ici les styles que tu veux lui appliquer }
et ton code html<input type="checkbox" class="machkb" id="toto"> <input type="checkbox" id="titi"> <input type="checkbox" id="tutu">
-
Merci, mais ca ne fonctionne pas.
Voici mon code HTML
Question ?<br />
<input type="checkbox" name="r1" id="r1" /> <label for="r1">Réponse</label><br><br>
<input type="checkbox" name="r2" id="r2" /> <label for="r2">réponse2</label><br><br>
<input type="checkbox" name="3" id="3" /> <label for="3">réponse3</label><br><br>
<input type="checkbox" name="4" id="4" /> <label for="4">reponse4</label><br>
Active ce bouton !
<p><input type="checkbox" id="test1" />Déconnecté <label for="test1"><span class="ui"></span>Connecté</label></p>
</label>
</p>
Voici mon code CSS :[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 75px;
cursor: pointer;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '';
position: absolute;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
left:0; top: -2px;
width: 65px; height: 28px;
background: #ff0000;
border-radius: 15px;
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-ms-transition: background-color .2s;
transition: background-color .2s;
}
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
width: 20px; height: 20px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
border-radius: 50%;
background: #ffffff;
top: 2px; left: 5px;
}
/* on checked */
[type="checkbox"]:checked + label:before {
background:#00cb18;
}
[type="checkbox"]:checked + label:after {
background: #ffffff;
top: 2px; left: 40px;
}
[type="checkbox"]:checked + label .ui,
[type="checkbox"]:not(:checked) + label .ui:before,
[type="checkbox"]:checked + label .ui:after {
position: absolute;
left: 6px;
width:65px;
border-radius: 15px;
font-size: 14px;
font-weight: bold;
line-height: 22px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
}
[type="checkbox"]:not(:checked) + label .ui:before {
left: 32px
}
[type="checkbox"]:checked + label .ui:after {
color: #ffffff;
}
[type="checkbox"]:focus + label:before {
border: 1px dashed #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-top: -1px;
}
Je voudrais que la partie du haut soit juste une case à cocher et que le bas reste comme il est.
Merci
-
