Можно ли без хаков выровнять select по правому краю?

Question

[Максим Шадрин]

Суть вопроса довольно банальна. Хочу, чтобы текст внутри селекта выравнивался по правому краю, а следом шла стрелочка.
Как это выглядит без вмешательства:

Как я хочу, чтобы это выглядело

Т.е. текст выравнивается по правому краю, следом за ним идет стрелка выбора, если бы варианты выбора так же выравнивались по правому краю, это было бы приятным бонусом.
Первое, что нагуглил, это атрибут dir="rtl"
Но, тогда стрелка будет слева, ибо мы просто меняем порядок слов, справа налево
НЕ ПОДХОДИТ
Следующей идеей было убрать стрелку вообще с помощью css свойства appearance: none, которое кстати довольно плохо поддерживается, и добавлением своей стрелочки псевдоклассу :after

select.city:after {
  content: "▽";
}

Как оказалось, псевдоклассы не применяются к select, по крайней мере у меня в последнем chrome ничего не произошло.

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

Answer 1

[DmitrySorokin]

как вариант, можно обернуть селект в div, и добавить псевдо-элемент обертке. А селекту добавить отступ справа.

Стрелку можно обрезать, сделав селект шире родителя, родителю добавить overflow.

Comments

[Максим Шадрин]

так и сделал, но это все-таки хак :( А стрелку можно убрать свойством appearance: none, а для ie так: ::-ms-expand{display: none;}