alineación de texto: a la derecha en <seleccionar> o <opción>

82

¿Alguien sabe si es posible alinear el texto a la derecha de un elemento <select>o más específicamente <option>en WebKit ? No es necesario que sea una solución de varios navegadores, incluido IE, pero debería ser CSS puro si es posible.

He probado ambos:

select { text-align: right }y option { text-align: right }, pero ninguno parece haber funcionado en WebKit (Chrome, Safari o Mobile Safari.

¡Cualquier ayuda recibida con gratitud!

html css webkit BenM
fuente
3
En algún lugar hay una razón realmente tonta por la que option {text-align: right;}no funciona.
Bob Stein

Respuestas:

81

Podría intentar usar el atributo "dir", pero no estoy seguro de que produzca el efecto deseado.

<select dir="rtl">
    <option>Foo</option>    
    <option>bar</option>
    <option>to the right</option>
</select>

Demostración aquí: http://jsfiddle.net/fparent/YSJU7/

Padre franco
fuente
2
De hecho, eso es perfecto. De appearance: none;todos modos, estaba usando el atributo, por lo que la posición del menú desplegable no importa. ¡Gracias!
BenM
31
Esto no funciona en todos los casos: <option> 23 "x 42" </option> produce "x 42" 23. rtl también cambia la forma en que se lee en un lector de pantalla.
Jason T Featheringham
9
¿No parece un truco sucio solo para darle el aspecto adecuado sin pensar en cómo se procesaría en algunos casos especiales?
Sergei Basharov
28
En mi humilde opinión, esto es malo por dos razones. 1. Es semánticamente incorrecto. 2. En Chrome 30, dir="rtl"mueve la flecha que indica el menú desplegable hacia la izquierda.
feklee
12
Esta es una idea TERRIBLE chicos. RTL está diseñado para idiomas que dibujan caracteres en orden de derecha a izquierda, y arruinará mucho el contenido que coloque en dicha opción si ese contenido está escrito en un idioma LTR. Por ejemplo, una fecha como "10 de agosto de 2017" se dibujará como "10 de agosto de 2017". NO tienes control sobre lo que le hace a tu texto. NO use esto.
devios1
71

El siguiente CSS alineará a la derecha tanto la flecha como las opciones:

select { text-align-last: right; }
option { direction: rtl; }
<!-- example usage -->
Choose one: <select>
  <option>The first option</option>
  <option>A second, fairly long option</option>
  <option>Last</option>
</select>
Expandir fragmento

Laico
fuente
2
Gracias @Laiacy - ¡Esto es fantástico! Espero que obtenga muchos más votos a favor.
elPastor
Gracias a ti @ pshep123. Realmente aprecio tu comentario :)
Laiacy
Esto no parece funcionar para los valores de las opciones cuando hago clic en el menú desplegable (al menos en Windows Google Chrome). Solo funciona antes de que se active el menú desplegable.
Ryan
1
@Ryan, he editado mi respuesta. Ahora se aplica a la selección y a los valores de opción en el menú desplegable. Avísame si te funciona
Laiacy
Para mi esta es la respuesta. Quería mantener la flecha pequeña en el lado derecho, pero las opciones deben estar alineadas a la derecha => esta es la respuesta que lo logra
Desencadenado
31

La mejor solución para mí fue hacer 

select {
    direction: rtl;
}

y entonces 

option {
    direction: ltr;
}

de nuevo. Por lo tanto, no hay cambios en la forma en que se lee el texto en un lector de pantalla y no hay problemas de formato.

Martin Schilliger
fuente
1
Acabo de descubrir que IE6-8 (no sé acerca de IE8 +) no se traduce correctamente…: - /
Martin Schilliger
Y también en Firefox esto no funciona correctamente. Parece que solo en Webkit es una buena idea…
Martin Schilliger
si su opción html contiene (), eso moverá) al principio de la línea (antes del primer carácter a la izquierda). > _ <
rm-
Además, si pega "()" como &#40;y &#41;?
Martin Schilliger
1
Sin embargo, en Firefox, el valor actual (seleccionado) se muestra con "AM" a la izquierda ("AM 9:30").
Mark Schneider
25

Creo que lo que quieres es:

select {
  direction: rtl;
}

jugueteó aquí: http://jsfiddle.net/neilheinrich/XS3yQ/

nheinrich
fuente
9
Genial, pero la flecha luego va hacia la izquierda. ¿Qué pasa si queremos que tanto el texto como la flecha de selección estén alineados a la derecha?
Baptiste
1

Estaba enfrentando el mismo problema en el que necesito alinear el valor del marcador de posición seleccionado a la derecha del cuadro de selección y también necesito alinear las opciones a la derecha, pero cuando he usado la dirección: rtl; para seleccionar y aplicar un relleno derecho para seleccionar, luego todas las opciones también se desplazan a la derecha mediante el relleno, ya que solo quiero aplicar relleno al marcador de posición seleccionado.

He solucionado el problema siguiendo el estilo:

select:first-child{
  text-indent: 24%;
  direction: rtl;
  padding-right: 7px;
}

select option{
  direction: rtl;
}

Puede cambiar la sangría del texto según sus necesidades. Espero que te ayude.

Ashish Sharma
fuente