Est-il possible de centrer le texte dans une boîte de sélection ?

Question

J'ai essayé ceci : http://jsfiddle.net/ilyaD/KGcC3/

HTML :

<select name="state" class="ddList">
    <option value="">(please select a state)</option>
    <option class="lt" value="--">none</option>
    <option class="lt" value="AL">Alabama</option>
    <option class="lt" value="AK">Alaska</option>
    <option class="lt" value="AZ">Arizona</option>
    <option class="lt" value="AR">Arkansas</option>
    <option class="lt" value="CA">California</option>
    <option class="lt" value="CO">Colorado</option>
</select>

CSS :

select { width: 400px; text-align: center; }
select .lt { text-align: center; }

Comme vous pouvez le constater, cela ne fonctionne pas. Existe-t-il une méthode CSS pour centrer le texte dans la boîte de sélection ?

Answer 1

Je crains que cela ne soit pas possible avec un simple CSS, et qu'il ne soit pas possible de le rendre totalement compatible avec les différents navigateurs.

Cependant, en utilisant un plugin jQuery, vous pouvez styliser la liste déroulante :

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

Ce plugin cache le select et crée l'élément span etc. à la volée pour afficher une liste déroulante personnalisée. Je suis certain que vous pourrez modifier les styles sur les travées, etc. pour centrer les éléments.

Answer 2

Juste en utilisant ceci :

select {

text-align-last: center;
padding-right: 29px;

}

Answer 3

select {
  text-align: center;
  text-align-last: center;
}
option {
  text-align: left;
}

<select>
   <option value="">(please select a state)</option>
   <option class="lt" value="--">none</option>
   <option class="lt" value="AL">Alabama</option>
   <option class="lt" value="AK">Alaska</option>
   <option class="lt" value="AZ">Arizona</option>
   <option class="lt" value="AR">Arkansas</option>
   <option class="lt" value="CA">California</option>
   <option class="lt" value="CO">Colorado</option>
</select>

Answer 4

Cette fonction JS devrait fonctionner pour vous

function getTextWidth(txt) {
  var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
  var elmWidth = $elm.width();
  $elm.remove();
  return elmWidth;
}
function centerSelect($elm) {
    var optionWidth = getTextWidth($elm.children(":selected").html())
    var emptySpace =   $elm.width()- optionWidth;
    $elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start 
$('.centerSelect').each(function(){
  centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
  centerSelect($(this));
});

Codepen complet ici : http://codepen.io/anon/pen/NxyovL

Answer 5

J'ai toujours réussi à me débrouiller avec le hack suivant pour le faire fonctionner avec css uniquement.

padding-left: 45%;
font-size: 50px;

padding centre le texte et peut être ajusté en fonction de la taille du texte :)

Ce n'est évidemment pas 100% correct du point de vue de la validation, mais cela fait l'affaire :)