Centrer verticalement le texte d'un element select (formulaire)

Bonjour,

J'ai fait un select tout simple :

<select name="" style="height:30px;">
<option>Mr.</option>
<option>Mmme.</option>
<option>Mlle.</option>
</select>

quand je modifie la hauteur du select comme ci-dessus le texte n'est n'est plus centré verticalement.

J'ai essayé de jouer sur line-height et autre vertical-align mais rien n'y fait.
J'ai aussi essayé le padding-top mais là ca decale aussi le bouton du select.

Pour une question de design mon select doit faire 30 px de haut.
Comment faire pour que le texte soit centré verticalement sur tous les navigateurs?

Merci de votre aide.

Bonjour,

J'ai essayé ceci avec succès sur Firefox :

select {
	height:30px;
	font:normal 16pt helvetica,arial,verdana,sans-serif;
}

select option {font:normal 12pt helvetica,arial,verdana,sans-serif;}

Sous IE, ça semble fonctionner aussi, sauf la taille de police des options. Pour les autres navigateurs, je ne sais pas...
Modifié par lddsoft (08 Mar 2011 - 10:47)

Le comportement de l'alignement vertical dans un select à l'air d'être différent sur la plupart des navigateurs.

Si tu alignes le texte avec la propriété padding-top (et que tu n'oublies pas de le répercuter sur le height), tu devrais finir par avoir le résultat que tu recherches.

Bonjour,

Les SELECT, à part donner une largeur, mieux vaut pas y toucher.
On peut éventuellement jouer un peu sur height ou sur padding-top et padding-bottom (dans la mesure du très très raisonnable), mais même ça ça risque de pas bien passer sur les différents navigateurs et systèmes d'exploitation. Dans Chrome et Safari sur Mac, padding et height sont ignorés. Dans Firefox sur Mac, ils sont pris en compte mais le rendu graphique est affreux.

Une remarque personnelle non technique: les options Madame/Mademoiselle, c'est sexiste et rétrograde. Pour une journée des droits de la femme, c'est bien joué. Si le sexe de la personne qui remplit le formulaire est important, le demander tel quel (sexe).

S'il n'est pas important et que c'est juste pour faire joli et pouvoir écrire "Mme Machin" dans la newsletter, franchement, faut arrêter, c'est ridicule.

Enfin, je signale que les trois abréviations utilisées dans cet exemple sont fausses. Oui, toutes les trois.