Modifier checkboxs sur une seule partie de la page

XtremeOne Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 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.
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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">

1
XtremeOne Messages postés 2 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > XtremeOne Messages postés 2 Date d'inscription   Statut Membre Dernière intervention  
 
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.
0

Discussions similaires

"Couleur de page" pour une seule page
lisa -
Lisa -

6 réponses