Style qui ne s'applique pas

Bonjour,

J'ai un formulaire dont voici une partie :

<label for="article_expiration_date">Expiration date</label>
<input id="article_expiration_date" size="20" name="article[expiration_date]" value="" type="text" />
</fieldset>
<label class="required floatnone" for="article_text">*Text</label><br />

<input type="button" value="Bold" class="button" onclick="simpleTag('article_text', 'b');" title="[b]...[/b]" />
<input type="button" value="Italic" class="button" onclick="simpleTag('article_text', 'i');" title="[i]...[/i]" />
<input type="button" value="Underline" class="button" onclick="simpleTag('article_text', 'u');" title="[u]...[/u]" />

Ma feuille de style contient :

#content input { 
	color: #000000;
	background: #fee3ad;
	border: 1px solid #000000;
	margin-bottom: 5px;
}

#content input:focus, select:focus, textarea:focus {
	background-color: #ffffff;
	border: 2px solid #000000;
	color: #ff0000;
}

.button {
	color: #ffffff;
	background: #336699;
	border: 1px solid #000000;
}

Le style de la classe button ne s'applique pas. A la place j'ai le style général défini pour les champs de formulaires content input. Que faut-il faire ?
Modifié par Neuromancien (02 Jun 2008 - 23:00)

En forçant un peu ça devrait passer Essaye le forceps suivant :

#content input.button {
	color: #ffffff;
	background: #336699;
	border: 1px solid #000000;
}

Bonjour,

C'est très bien les forceps, mais si au lieu de proposer un bout de code CSS comme solution on expliquait quelle est l'erreur? Il me semble que ce serait plus profitable pour la personne qui pose une question.

Donc, le problème rencontré est un problème de priorité des sélecteurs CSS. En effet, chaque sélecteur CSS a un poids, et les déclarations CSS associées à un sélecteur de poids supérieur ont la priorité, même si elles sont placées avant dans le code CSS.

- #content input a un poids de 0101;
- .button a un poids de 0010 (donc inférieur);
- #content .button a un poids de 0110 (donc supérieur).

Pour en savoir plus, on pourra lire:
http://openweb.eu.org/articles/cascade_css/
(En fait quand je dis «on pourra lire», c'est une blague. Il faut lire cet article. Non mais. )