Text-align: справа на <select> или <option>

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

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

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

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

Ответ 1

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

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

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

Ответ 2

Следующий 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>

Ответ 3

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

select {
    direction: rtl;
}

а затем

option {
    direction: ltr;
}

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

Ответ 4

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

select {
  direction: rtl;
}

здесь: http://jsfiddle.net/neilheinrich/XS3yQ/

Ответ 5

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

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

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

select option{
  direction: rtl;
}

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