Je veux vertical-align texte dans la boîte de sélection

Je suis tombé sur cet ensemble de propriétés css qui semblent alignez verticalement le texte dans la taille de sélectionner des éléments dans Firefox:

select
{
    box-sizing: content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
}

Si quelque chose, cependant, il pousse le texte vers le bas encore plus loin dans IE8. Si j'ai mis la box-sizing propriété border-box, elle au moins ne fait pas de IE8 pire (et FF s'applique toujours à l'-moz-box-sizing de la propriété). Il serait agréable de trouver une solution pour IE, mais je ne retiens pas mon souffle.

Edit: Nix cette. Il ne fonctionne pas après le test. Pour toute personne intéressée, cependant, le problème semble provenir de styles intégrés dans FF formulaires.fichier css affectant d'entrée et de sélectionner des éléments. La propriété en question est line-height:normal !important. Il ne peut pas être remplacée. Je l'ai essayé. J'ai découvert que si je supprime la propriété intégrée dans Firebug, je reçois un élément select raisonnablement à la verticale centrée sur le texte.

J'ai rencontré ce problème exactement. Mon sélectionnez options ont été centrés verticalement dans webkit, mais ff par défaut vers le haut. Après avoir regardé autour de moi, je n'ai pas vraiment envie de créer un travail autour de qui était en désordre et en fin de compte n'a pas résolu mon problème.

Solution: Javascript.

if ($.browser.mozilla) {
            $('.styledSelect select').css( "padding-top","8px" );
        }

Cela résout votre problème de manière très précise. Le seul inconvénient est que je suis à l'aide de jQuery, et si vous n'êtes pas à l'aide de jQuery sur votre projet, vous ne pouvez pas à inclure une bibliothèque js pour faire un seul.

Note: je ne recommande pas de style de n'importe quoi avec js, sauf si absolument nécessaire. CSS devrait toujours être la principale solution pour le style de jQuery (dans cet exemple) que l'axe intitulée "Briser en cas d'Urgence".

*Mise à JOUR* C'est un vieux post et comme il semble, les gens sont toujours référencement de cette solution que je devrais état (comme mentionné dans les commentaires) que, depuis de 1,9 cette fonction a été supprimée à partir de jQuery. Veuillez voir le Modernizr projet pour effectuer fonction de détection de en lieu et place de browser sniffing.

Jusqu'à présent cela fonctionne bien pour moi:

line-height: 100%;

J'ai trouvé que le simple réglage de la hauteur de la ligne et de la hauteur à la même quantité de pixels produit le meilleur résultat cohérent. Par "plus cohérente", je veux dire de façon optimale cohérente, mais bien sûr, il n'est pas à 100% "pixel-perfect" dans les navigateurs. En outre, je trouve que Firefox (v. 17.x) tend vers la foule l'option de texte à la droite à l'encontre de la flèche de la liste déroulante; j'ai atténué ce avec une petite quantité de rembourrage-droit sur l'élément OPTION seulement. Ce paramètre n'affecte pas l'apparence dans IE 7-9.

Mon résultat:

select, option {
    font-size:10px;
    height:19px;
    line-height: 19px;
    padding:0;
    margin:0;
}

option {
    padding-right:6px; /* Firefox */
}

NOTE -- mon SÉLECTIONNER l'élément utilise une police plus petite, 10px. Évidemment, vous aurez besoin d'ajuster les proportions en conséquence pour votre INTERFACE spécifique à chaque contexte.

Essayer de définir le "line-height" attribut

Comme ceci:

select{
    height: 28px !important;
    line-height: 28px;
}

Voici un peu de documentation sur cet attribut:

http://www.w3.org/wiki/CSS/Properties/line-height

http://www.w3schools.com/cssref/pr_dim_line-height.asp

J'ai eu le même problème et travaillé là-dessus pendant des heures. J'ai enfin quelque chose qui fonctionne.

Rien sur le fond, j'ai essayé travaillé dans chaque situation, jusqu'à ce que j'ai positionné un div à reproduire le texte de la première option de la boîte de sélection de gauche et de la réelle première option vide. J'ai utilisé {pointeur-events:none;} pour permettre aux utilisateurs de cliquer sur les div.

HTML

    <div class='custom-select-container'>
      <select>
        <option></option>
        <option>option 1</option>
        <option>option 2</option>
      </select>
      <div class='custom-select'>
        Select an option
      </div>
    <div>

CSS

.custom-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;}

Cela a été corrigé dans Firefox Nightly et sera dans le prochain firefox construire.

Veuillez voir ce bug pour plus d'informations https://bugzilla.mozilla.org/show_bug.cgi?id=610733

Le plus proche de la solution générale que je connais utilise la boîte de propriété aligner, comme décrit ici.
Exemple de travail est ici (je peux le tester que sur Chrome, de croire qu'a l'équivalent pour les autres navigateurs aussi).

CSS:

select{
  display:-webkit-box;
  display:-moz-box;
  display:box;
  height: 30px;;
}
select:nth-child(1){
  -webkit-box-align:start;
  -moz-box-align:start;
  box-align:start;
}
select:nth-child(2){
  -webkit-box-align:center;
  -moz-box-align:center;
  box-align:center;
}
select:nth-child(3){
  -webkit-box-align:end;
  -moz-box-align:end;
  box-align:end;
}