Modifier checkboxs sur une seule partie de la page

Fermé

XtremeOne Messages postés 2 Date d'inscription mercredi 17 août 2016 Statut Membre Dernière intervention 17 août 2016 - 17 août 2016 à 11:24
jordane45 Messages postés 38285 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 novembre 2024 - 17 août 2016 à 13:34

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.

A voir également:

Modifier checkboxs sur une seule partie de la page
Comment supprimer une page sur word - Guide
Comment imprimer un tableau excel sur une seule page - Guide
Modifier liste déroulante excel - Guide
Modifier dns - Guide
Comment modifier un pdf - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38285 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 novembre 2024 4 697
17 août 2016 à 11:38

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">

XtremeOne Messages postés 2 Date d'inscription mercredi 17 août 2016 Statut Membre Dernière intervention 17 août 2016
17 août 2016 à 12:33

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

jordane45 Messages postés 38285 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 novembre 2024 4 697 > XtremeOne Messages postés 2 Date d'inscription mercredi 17 août 2016 Statut Membre Dernière intervention 17 août 2016
17 août 2016 à 13:34

Ben oui... là ... tu cibles TOUTES les checkbox

[type="checkbox"]

Il te faut modifier le code pour choisir le ou les éléments à modifier en css .
Pour cela... soit tu passes par des class ... soit par les ID de tes éléments html.

Discussions similaires

Chemin Logo du site de la Cité de l'espace

[référencement] Ne pas être référencé