É possível centralizar o texto na caixa de seleção?

Eu tentei isso: 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; }

Como você pode ver, não funciona. Existe uma maneira somente CSS de centralizar o texto na caixa de seleção?

Receio que isso não seja possível com CSS simples e não seja possível tornar completamente compatível com vários navegadores.

No entanto, usando um plugin jQuery, você pode estilizar o menu suspenso:

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

Este plugin oculta o selectelemento e cria spanelementos etc. rapidamente para exibir um estilo de lista suspensa personalizado. Estou bastante confiante de que você poderá alterar os estilos nos vãos, etc., para alinhar os itens no centro.

Existe uma solução parcial para o Chrome :

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

Ele centraliza a opção selecionada, mas não as opções dentro da lista suspensa.

Isso é para alinhar corretamente. Tente:

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

o suporte do navegador para o text-align-lastatributo pode ser encontrado aqui: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp Parece que apenas o Safari ainda não o suporta.

Você precisa colocar a regra CSS na classe select.

Usar recuo de texto CSS

Exemplo

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

Código CSS

select { text-indent: 5px; }

Sim, é possível. Você pode usar o último alinhamento de texto

text-align-last: center;

2020, estou usando:

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

apenas usando isso:

select {

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

}

Essa função JS deve funcionar para você

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 completo aqui: http://codepen.io/anon/pen/NxyovL

Eu sempre tive o seguinte hack para fazê-lo funcionar apenas com css.

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

o preenchimento centralizará o texto e poderá ser ajustado para o tamanho do texto :)

Obviamente, isso não é 100% correto do ponto de vista da validação, eu acho, mas ele faz o trabalho :)

Solução "falsa" alternativa se você tiver uma lista com opções semelhantes no tamanho do texto (por exemplo, seleção de página):

padding-left: calc(50% - 1em);

Isso funciona no Chrome, Firefox e Edge. O truque está aqui para empurrar o texto da esquerda para o centro e subtrair a metade do comprimento em px, em ou qualquer que seja o texto da opção.

Melhor solução A IMO (em 2017) ainda está substituindo o select via JS e construa sua própria caixa de seleção falsa com divs ou qualquer outra coisa e vincule eventos de clique nele para suporte entre navegadores.

Não muito centralizado, mas usando o exemplo acima, você pode criar uma margem esquerda na caixa de seleção.

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>

isso funcionou para mim:

text-align: center;
text-align-last: center;

tente isto:

select {
    padding-left: 50% !important;
    width: 100%;
}

Você não pode realmente personalizar <select>ou <option>muito. A única maneira (entre navegadores) seria criar manualmente uma lista suspensa com divs e css / js para criar algo semelhante.

Se você não encontrou nenhuma solução, pode usar este truque em angularjs ou js para mapear o valor selecionado com um texto na div, esta solução é totalmente compatível com css em angular, mas precisa de um mapeamento entre select e div:

var myApp = angular.module('myApp', []);

myApp.controller('selectCtrl', ['$scope',
  function($scope) {
    $scope.value = '';


  }
]);

.ghostSelect {
  opacity: 0.1;
  /* Should be 0 to avoid the select visibility but not visibility:hidden*/
  display: block;
  width: 200px;
  position: absolute;
}
.select {
  border: 1px solid black;
  height: 20px;
  width: 200px;
  text-align: center;
  border-radius: 5px;
  display: block;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-app ng-controller="selectCtrl">
    <div class=select>
      <select ng-model="value" class="ghostSelect">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
      <div>{{value}}
      </div>
    </div>
  </div>
</body>

Espero que isso possa ser útil para alguém, pois levei um dia para encontrar essa solução no phonegap.

Embora não seja possível centralizar o texto da opção em uma seleção, você pode colocar uma div absolutamente posicionada sobre a parte superior da seleção para o mesmo efeito:

#centered
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 818px;
  height: 37px;
  text-align: center;
  font: bold 24pt calibri;
  background-color: white;
  z-index: 100;
}

#selectToCenter
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 840px;
  height: 40px;
  font: bold 24pt calibri;
}

$('#selectToCenter').on('change', function () {
    $('#centered').text($(this).find('option:selected').text());
});

<select id="selectToCenter"></select>
<div id="centered"></div>

Certifique-se de que a div e a select tenham posições fixas no documento.

Ainda não é 100%, mas você pode usar esse trecho!

alinhamento de texto último: centro; // Para o alinhamento de texto do Chrome: center; // Para Firefox

Não funciona no Safari ou Edge, por enquanto!

se as opções forem estáticas, você poderá ouvir o evento de alteração na caixa de seleção e adicionar preenchimento para cada item individual

$('#id').change(function() {
    var select = $('#id');
    var val = $(this).val();

    switch(val) {
        case 'ValOne':
            select.css('padding-left', '30px');
            break;
        case 'ValTwoLonger':
            select.css('padding-left', '20px');
             break;
        default:
            return;
    }
});

adicione & nbsp assim ...

    <option value="0"> &nbsp&nbsp&nbsp&nbsp&nbsp--Select Name--</option>

até obter um efeito de texto alinhado ao centro