¿Es posible centrar texto en el cuadro de selección?

Question

Yo intento esto: 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 se puede ver que no funciona. ¿Hay una forma de CSS para centrar el texto en el cuadro de selección?

Answer 1

Me temo que esto no es posible con CSS simple, y no será posible hacer compatible completamente entre navegadores.

Sin embargo, el uso de un plugin de jQuery, se podía peinar el menú desplegable:

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Este plugin esconde el elemento select, y crea span elementos etc sobre la marcha para mostrar una costumbre desplegable estilo de lista. Estoy bastante seguro de que podrá cambiar los estilos en los tramos, etc., para alinear los elementos en el centro.

Answer 2

No se puede personalizar realmente <select> o <option> mucho. La única forma (cross-browser) sería crear manualmente un menú desplegable con divs y css/js para crear algo similar.

Answer 3

Tienes que poner la regla de CSS en la clase de selección.

uso de CSS text-indent

Ejemplo

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

código CSS

select { text-indent: 5px; } 

Answer 4

No del todo centrado pero utilizando ejemplo anterior se puede hacer un margen izquierdo de seleccionar box

<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> 

Answer 5

Aunque no se puede centrar el texto opción dentro de un grupo selecto, se puede poner un div con posición absoluta sobre la parte superior de la selección para el mismo efecto:

#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> 

Asegúrese de que el tanto el div y seleccione tener posiciones fijas en el documento.

Answer 6

Siempre me he salido con la siguiente hack para que funcione solo con CSS.

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

acolchado centrará el texto y puede ser ajustado para el tamaño del texto :)

Esto obviamente no es 100% correcto desde el punto de vista de validación supongo pero hace el trabajo :)

Answer 7

si las opciones son estáticos, se puede detectar el evento de cambio en su cuadro de selección y agregar relleno para cada elemento 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; 
    } 
}); 

Answer 8

Hay una solución parcial para Chrome:

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

Hace centro de la opción seleccionada, pero no las opciones dentro del menú desplegable.

Answer 9

Esta función JS debe trabajar para usted

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)); 
}); 

completa Codepen aquí: http://codepen.io/anon/pen/NxyovL

Answer 10

Si no encuentra ninguna solución, puede utilizar este truco en AngularJS o el uso de JS para asignar valor seleccionado con un texto en el div, esta solución está lleno CSS compatible con el angular, pero necesitan un mapeo entre Seleccionar y 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 esto pueda ser útil para alguien, ya que me llevó un día encontrar esta solución en phonegap.

Answer 11

Eso es para alinear a la derecha. Inténtelo:

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

Answer 12

simplemente usando esto:

select { 

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

} 

Answer 13

Alternativa solución "falso" si usted tiene una lista con opciones similares en la longitud del texto (página de selección, por ejemplo):

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

Esto funciona en Chrome, Firefox y Edge. El truco está aquí para presionar el texto desde la izquierda hacia el centro, luego restar la mitad de longitud en px, em o lo que sea del texto de la opción.

mejor solución de la OMI (en 2017) todavía está sustituyendo al selecto a través de JS y construir su propia falsa seleccionar-caja con divs o lo que sea y eventos se unen haga clic en él para el apoyo multi-navegador.

Answer 14

Esto puede ser útil para casos de uso muy específicos. Es tedioso y feo pero funciona en todos los navegadores: solo use espacios en blanco codificados para que cada entrada tenga la misma longitud.

<select class="form-control" id="sel1"> 
    <option>-10</option> 
    <option>&nbsp;-9</option> 
    <option>&nbsp;-8</option> 
    <option>&nbsp;-7</option> 
    <option>&nbsp;-6</option> 
    <option>&nbsp;-5</option> 
    <option>&nbsp;-4</option> 
    <option>&nbsp;-3</option> 
    <option>&nbsp;-2</option> 
    <option>&nbsp;-1</option> 
    <option>&nbsp;&nbsp;0</option> 
    <option>&nbsp;&nbsp;1</option> 
    <option>&nbsp;&nbsp;2</option> 
    <option>&nbsp;&nbsp;3</option> 
    <option>&nbsp;&nbsp;4</option> 
    <option>&nbsp;&nbsp;5</option> 
    <option>&nbsp;&nbsp;6</option> 
    <option>&nbsp;&nbsp;7</option> 
    <option>&nbsp;&nbsp;8</option> 
    <option>&nbsp;&nbsp;9</option> 
    <option>&nbsp;10</option> 
</select>