Un style pour un petit formulaire

Bonjour,

J'ai un problème avec l'application d'un style à un formulaire situé dans la sidebar de http://www.yazerty.net/

Voici le code xhtml :

<div id="sidebar">
<ul>
<li id="search" class="widget widget_search">
<form id="searchform" method="get" action="http://pod.terranumerica.info">

<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="Recherche" />
</div>

</form>
</li>

(....)

Et le code css correspondant :

#search #s {
	color: #005D99;
	width: 180px;
	border: 1px solid #CDCDCD;
	padding: 1px 2px;
	font-size: 1em;
}
#search .submit {
	color: #005D99;
	background: #FFF;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	border: 1px solid #FFF;
}
#search .submit:hover { background: #005D99; color: #FFF; border: 1px solid #005D99; }

Le input est bien "stylé" mais pas le bouton de recherche. Je ne comprends pas pourquoi. Ca devrait prendre le .submit non ?

Firebug m'annonce 3 erreurs mais je te le précise au cas ou:
tu as 3 fois font-size: 1.1em Verdana, Geneva, Helvetica, Arial, sans-serif;
pour l'ID #comment-form, il faudrait rajouter un font-family

sinon pour ton problème moi je donnerais plutot un ID au div qui contient les input et je ferais

#monID submit {
mespropriétés; blabla;
...
}

Tu as indiqué ici submit comme une class, non comme un élément c'est peut être ça..

milouse a écrit :
Tu as indiqué ici submit comme une class, non comme un élément c'est peut être ça..

Pas tout à fait. Dans le code HTML donné, "submit" n'est ni une classe, ni un élément, mais la valeur de l'attribut type pour un élément input donné.

Un sélecteur permettant de viser précisément cet élément :

input[type=submit] {...}

Mais Internet Explorer ne comprenant pas le sélecteur d'attribut, on préfèrera sans doute passer par une classe :

<input class="submit" type="submit" value="Recherche" />

ou un identifiant, pourquoi pas...

En fait c'est le code par défaut du formulaire de recherche de Wordpress.
Par défaut le template c'est ça :

<li id="search" class="widget widget_search">			<form id="searchform" method="get" action="http://pod.terranumerica.info">
			<div>
			<input type="text" name="s" id="s" size="15" /><br />
			<input type="submit" value="Recherche" />
			</div>
			</form>
		</li>

#searchform {
	margin: 10px auto;
	padding: 5px 3px; 
	text-align: center;
	}
#sidebar #searchform #s {
	width: 108px;
	padding: 2px;
	}

#sidebar #searchsubmit {
	padding: 1px;
	}

C'est bizarre ce #searchsubmit non ?