Discussion :

[dolu02]

Bonjour à tous!

Je usis en train de personnaliser un formulaire en css en suivant ce tuto : http://a-pellegrini.developpez.com/t...ss/formulaire/

Tous les labels sont modifiés grâce à la css, mais j'ai des labels sur des boutons radios dont je ne veux pas qu'ils soient modifiés.

Comment faire?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
	  <p>
	  <label for="licenseOK">License ok</label>
	      <label for="licenseok1">Yes</label>
	        <input type="radio" id="licenseok1" name="licenseOK" value="1" />
	      <label for="licenseok0">No</label>
	        <input type="radio" id="licenseok0" name="licenseOK" value="0" checked="checked" />
	  </p>

[Erwan31]

Bonjour,
soit définissant un style en-ligne (local) soir via une class qui annule le bloc de déclarations CSS pour les labels.

[dolu02]

J'ai essayé une classe particulière pour ces labels :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
	  <p>
	  <label for="licenseOK">License ok</label>
	      <label for="licenseok1">Yes</label>
	        <input type="radio" class="nostyle" id="licenseok1" name="licenseOK" value="1" />
	      <label for="licenseok0">No</label>
	        <input type="radio" class="nostyle" id="licenseok0" name="licenseOK" value="0" checked="checked" />
	  </p>

et pour la css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#form1 .nostyle { background-color:#aab8bd;}

ou ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.nostyle { background-color:#aab8bd;}

mais ça n'a pas d'effet, ils restent toujours attachés à la css label.


Sinon je ne comprends pas bien la première solution que tu proposes : "sois définissant un style en-ligne (local)"

[Erwan31]

Ok alors ça doit venir d'un problème de spécificité (priorité),
ajoutes un !important juste aprés ta déclaration pour le vérifier.
Je t'expliquerai si quelque d'autre ne s'en charge pas, comment éviter le !important dans un second temps.
Tu dois donner la totalité du code CSS si possible.

[dolu02]

Voilà ma css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
/*formulaires*/
#form1 { width: 80%; }
#form1 p { margin: 2px; }
#form1 fieldset { margin-bottom: 10px;	border: #CCC 1px solid; }
#form1 fieldset legend { padding: 0 10px;	border-left: #CCC 1px solid; border-right: #CCC 1px solid; font-size: 1.2em; color:#006633; }
#form1 fieldset legend:hover { background-color:#accabd; }
#form1 label { background-color: #e1e2a8;	display: block;	width: 20%;	float: left; padding-right: 1%;	text-align: right; letter-spacing: 1px; }
.nostyle !important { background-color:#aab8bd;}
#form1 .form_label_nostyle { background: none; }
#form1 input, #form1 select, #form1 textarea { margin-left: 1%; border: #CCC 1px solid; }

Comme tu peux voir, j'ai mis !important mais ça ne change rien. (suis pas sûr que c'est là qu'il faut le mettre)


Merci de ton aide!

[Erwan31]

Ok non c'était pas là mais aprés la déclaration c-a-d aprés background-color:#aab8bd et avant le ";".

En principe ce code devrait passer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#form1 .nostyle { background-color:#aab8bd;}

Sinon essayes avec ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#form1 label.nostyle { background:#aab8bd;}

[dolu02]

Rien ne marche, le !important non plus :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#form1 label.nostyle { background-color:#aab8bd !important;}

Est ce que je dois donner une classe aux autres labels comme ça je n'aurais plus ce problème?

[Erwan31]

D'accord en fait tu as mis le class="" au niuveau des tes input et non des labels.

[dolu02]

Oui, bien vu!

Merci beaucoup à toi!




Sinon c'est correct si j'ai 3 labels pour 2 boutons radio?
1 Label "général" et 1 pour chaque bouton radio

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<label for="licenseOK">License ok</label>	      
              <label for="licenseok1" class="nostyle">Yes</label>
	        <input type="radio"  id="licenseok1" name="licenseOK" value="1" />
	      <label for="licenseok0" class="nostyle">No</label>
	        <input type="radio" id="licenseok0" name="licenseOK" value="0" checked="checked" />

L'affichage n'est pas bon avec cette méthode.

[Erwan31]

Sinon c'est correct si j'ai 3 labels pour 2 boutons radio?
1 Label "général" et 1 pour chaque bouton radio

Non c'est pas bon. Un label doit toujours être couplé avec un champ (input, select, textarea...)