HTML select и option смешанные направления (ltr & rtl)

Question

HTML select и option смешанные направления (ltr & rtl)

У меня есть поле выбора, которое я хочу выровнять справа, но я хочу, чтобы раскрывающийся список опций был выровнен слева. Вот так:

<select>

  <option>item</option>

</select>

И CSS:

select { direction: rtl; }

option { direction: ltr; }

Но установка направления тега select также задает направление раскрывающегося меню select. Смотрите здесь

Возможно ли это вообще? Я знаю, что в качестве альтернативы я мог бы создать пользовательский функционал выбора с помощью js, но я хотел бы сохранить его простым, если смогу.

632 2

html css html-select direction

2 ответов:

Comments

Ничего не найдено.

c-smile · Accepted Answer · 2014-12-14 01:32:34

direction: rtl; это не совсем выравнивание текста. Или, если быть точным, выравнивание текста-это побочный эффект направления. Обратите внимание, что направление также влияет на положение стрелки раскрывающегося списка в настройках.
Обычные браузеры не позволяют стилизовать select element (он выглядит существенно по-разному на разных платформах, особенно мобильных).
В Sciter Вы можете стилизовать <select> части по отдельности, поскольку выбранные компоненты являются нормальными элементами DOM:
select > caption { text-align:right; } 
select > button { ... } 
select > popup > option { text-align:left; } 
У меня есть это стало возможным, так как Sciter разработан специально для пользовательского интерфейса рабочего стола и <select> стиль является обязательным там.

В качестве решения для простых веб-страниц я бы предложил использовать заменители <select>, такие как http://getbootstrap.com/components/#btn-dropdowns

Oriol · Accepted Answer · 2014-12-14 01:26:56

Проблема с вашей скрипкой в том, что вы используете
.1 {
    direction: ltr;
}
Однако идентификаторы не могут начинаться с чисел. Следовательно, .1 - Неправильный селектор. Вы должны избежать этого: .\000031.
Тогда, если вы используете...
.\000031 {
    direction: ltr;
}
... он работает так, как вы хотите, по крайней мере, на Firefox 37.

Примечание другие браузеры могут не разрешить вам стилизовать элементы select.
#ex-1 {
    direction: rtl;
    width: 120px;
}
.\000031 {
    direction: ltr;
}
<select id="ex-1">
    <option class='1'>item one</option>
    <option class='1'>item two</option>
    <option class='1'>item three</option>
</select>