text-align: справа от <select> или <option>

84

Кто-нибудь знает, можно ли выровнять текст по правому краю <select>или, более конкретно, <option>элемента в WebKit . Это не обязательно должно быть кроссбраузерное решение, включая IE, но должно быть чистым CSS, если это возможно.

Я пробовал оба:

select { text-align: right }и option { text-align: right }, но, похоже, ни один из них не работал в WebKit (Chrome, Safari или Mobile Safari.

Любая помощь с благодарностью получена!

html css webkit BenM
источник
4
Где-то есть действительно глупая причина, почему option {text-align: right;}не работает.
Боб Штайн

Ответы:

80

Вы можете попробовать использовать атрибут "dir", но я не уверен, что это даст желаемый эффект?

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

Демо здесь: http://jsfiddle.net/fparent/YSJU7/

Фрэнк Родитель
источник
2
Собственно, это прекрасно. Я appearance: none;все равно использовал этот атрибут, поэтому положение раскрывающегося списка не имеет значения. Благодаря!
BenM
32
Это работает не во всех случаях: <option> 23 "x 42" </option> дает "x 42" 23. rtl также меняет способ его чтения в программе чтения с экрана.
Джейсон Т. Фезерингем,
10
Разве это не похоже на грязный прием, просто чтобы придать ему должный вид, не задумываясь о том, как это будет обрабатываться в некоторых особых случаях?
Сергей Башаров
29
ИМХО это плохо по двум причинам. 1. Это семантически неверно. 2. В Chrome 30 dir="rtl"перемещает стрелку, указывающую раскрывающийся список, влево.
feklee
14
Это УЖАСНАЯ идея, ребята. RTL предназначен для языков, которые рисуют символы в порядке справа налево, и очень сильно испортят контент, который вы добавляете в такой вариант, если этот контент написан на языке LTR. Например, дата типа «10 августа 2017 года» будет отображаться как «10 августа 2017 года». У вас нет контроля над тем, что он делает с вашим текстом. НЕ используйте это.
devios1
74

Следующий CSS выравнивает по правому краю стрелку и параметры:

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>
Развернуть фрагмент

Laiacy
источник
2
Спасибо @Laiacy - это фантастика! Я ожидаю, что вы получите гораздо больше голосов.
elPastor
Спасибо тебе @ pshep123. Я очень ценю ваш комментарий :)
Laiacy
Похоже, что это не работает для значений параметров, когда я нажимаю раскрывающийся список (по крайней мере, в Windows Google Chrome). Он работает только до переключения раскрывающегося списка.
Райан
1
@ Райан, я отредактировал свой ответ. Теперь применяется к выбору и значениям параметров в раскрывающемся списке. Дайте мне знать, если это
сработает
Для меня это ответ. Я хотел сохранить маленькую стрелку с правой стороны, но параметры должны быть выровнены по правому краю => это ответ, который достигает этого
Unchained
31

Лучшим решением для меня было сделать 

select {
    direction: rtl;
}

а потом 

option {
    direction: ltr;
}

очередной раз. Таким образом, нет никаких изменений в том, как текст читается в программе чтения с экрана, и нет проблем с форматированием.

Мартин Шиллигер
источник
1
Только что выяснилось, что IE6-8 (не знаю о IE8 +) не отображает это правильно…: - /
Мартин Шиллигер
А также в Firefox это работает неправильно. Кажется, только в Webkit хорошая идея…
Мартин Шиллигер
если ваш вариант html содержит (), который переместит) в начало строки (до первого символа слева). > _ <
rm- 01
Также, если вы вставите "()" как &#40;и &#41;?
Мартин Шиллигер 02
1
Однако в Firefox текущее (выбранное) значение отображается с «AM» слева («AM 9:30»).
Марк Шнайдер
25

Я думаю, что вы хотите:

select {
  direction: rtl;
}

возился здесь: http://jsfiddle.net/neilheinrich/XS3yQ/

Nheinrich
источник
9
Круто, но стрелка тогда идет влево. Что, если мы хотим, чтобы и текст, и стрелка выделения были выровнены по правому краю?
Батист
1

Я столкнулся с той же проблемой, когда мне нужно выровнять выбранное значение заполнителя справа от поля выбора, а также необходимо выровнять параметры по правому краю, но когда я использовал direction: rtl; для выбора и применения некоторого правого отступа, чтобы выбрать, затем все параметры также сдвигаются вправо путем заполнения, поскольку я хочу применить отступ только к выбранному заполнителю.

Я решил проблему следующим образом:

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

select option{
  direction: rtl;
}

Вы можете изменить отступ текста в соответствии с вашими требованиями. Надеюсь, это поможет тебе.

Ашиш Шарма
источник