[Css] Je veux aligner verticalement le texte dans la boîte de sélection


Answers

Je suis tombé sur cet ensemble de propriétés css qui semblent aligner verticalement le texte dans les éléments sélectionnés dans Firefox:

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

Si quoi que ce soit, cependant, il pousse le texte encore plus loin dans IE8. Si je redéfinis la propriété box-sizing sur border-box, cela ne rend pas pire IE8 (et FF applique toujours la propriété -moz-box-sizing). Ce serait bien de trouver une solution pour IE, mais je ne retiens pas mon souffle.

Edit: Nix cela. Cela ne fonctionne pas après le test. Pour tous ceux qui sont intéressés, le problème semble provenir des styles intégrés dans le fichier forms.css de FF affectant les éléments d'entrée et de sélection. La propriété en question est line-height: normal! Cela ne peut pas être outrepassé. J'ai essayé. J'ai découvert que si je supprime la propriété intégrée dans Firebug, j'obtiens un élément select avec un texte raisonnablement centré verticalement.

Question

Je veux aligner verticalement le texte dans une boîte de sélection. J'ai essayé d'utiliser

select{
   verticle-align:middle;
}

Cependant, cela ne fonctionne pas dans les navigateurs. Chrome semble aligner le texte dans la zone de sélection par défaut. FF l'aligne en haut et IE l'aligne en bas. Y'a-t-il une quelconque façon de réussir cela? J'utilise le widget Select de GWT dans UIBinder.

C'est actuellement ce que j'ai:

select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

Merci!




J'avais l'habitude d'utiliser la height et la height line-height avec les mêmes valeurs, mais la preuve s'est révélée être incohérente à travers les interwebs. Mon approche actuelle est de mélanger cela avec rembourrage comme ça.

select {
  font-size:14px;
  height:18px;
  line-height:18px;
  padding:5px 0;
  width:200px;
  text-align:center;
}

Vous pouvez également utiliser un padding pour la valeur horizontale au lieu de la width + text-align




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

line-height: 100%;



J'ai trouvé que le simple réglage de la hauteur de ligne et de la hauteur à la même quantité de pixels produisait le résultat le plus cohérent. Par "plus cohérent", je veux dire de manière optimale, mais bien sûr, il n'est pas parfait à 100% "pixel-parfait" entre les navigateurs. En outre, j'ai trouvé que Firefox (v. 17.x) a tendance à entasser le texte de l'option à droite par rapport à la flèche déroulante; J'ai allégé cela avec une petite quantité de remplissage-droit réglé 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 élément SELECT utilise une police plus petite, 10px. Évidemment, vous devrez ajuster les proportions en fonction de votre contexte d'interface utilisateur spécifique.




J'ai rencontré ce problème exactement. Mes options de sélection étaient verticalement centrées dans webkit, mais ff les a par défaut en haut. Après avoir regardé autour je ne voulais pas vraiment créer un travail qui était désordonné et finalement 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 très précisément. Le seul inconvénient ici est que j'utilise jQuery, et si vous n'utilisez pas déjà jQuery sur votre projet, vous ne voudrez peut-être pas inclure une bibliothèque js pour un one-off.

Note: Je ne recommande pas de styler quoi que ce soit avec js sauf si c'est absolument nécessaire. CSS devrait toujours être la solution principale pour le style - pensez à jQuery (dans cet exemple particulier) comme la hache étiquetée "Break en cas d'urgence".

* UPDATE * Ceci est un ancien post et comme il semble que les gens continuent à référencer cette solution, je dois dire (comme mentionné dans les commentaires) que depuis 1.9 cette fonctionnalité a été supprimée de jQuery. Veuillez voir le projet Modernizr pour effectuer la détection des fonctionnalités au lieu de renifler le navigateur .







J'ai eu le même problème et travaillé dessus pendant des heures. J'ai finalement trouvé quelque chose qui fonctionne.

Fondamentalement, rien de ce que j'ai essayé a fonctionné dans toutes les situations jusqu'à ce que je positionne un div pour répliquer le texte de la première option sur la boîte de sélection et laissé la première option réelle vide. J'ai utilisé {pointer-events: none;} pour permettre aux utilisateurs de cliquer sur la 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;}