Element select in rtl-languagex

For the select element, the drop-down list icon is on the right. When creating styles to support the rtl language, the text is superimposed on the icon, as in the figure.

Tell me, is the location of the select icon in the drop-down list always on the right? Or does it depend, for example, on the OS language?

1 answer 1

Not the most elegant solution, but still.

https://codepen.io/anon/pen/yPjVRr

 select { display:block; width: 200px; -webkit-appearance: none; appearance: none; -moz-appearance: none; padding-left: 140px; } div { position:absolute; content: '>'; width:15px; height: 15px; background-color:blue; left: 9px; z-index: 2; text-align: center; line-height: .85em; } 
 <div>></div> <select> <option>Пункт 1</option> <option>Пункт 2</option> </select>

  • The question is not how to change the position of the icon for rtl languages, but whether it should be done at all. I had a suggestion that in an OS with an rtl language, this icon may be on the left by default (like we have on the right). And then you don’t need to edit anything at all. But is it? - eav
  • Alternatively, try changing the lang attribute from html to the rtl values ​​of the language. - Ivan
  • Changing the lang attribute of html did not give anything: the icon is still to the right. - eav
  • The comment above refers to Opera. As it turned out, in Firefox, if the lang attribute in the html matches the rtl language, the icon is on the left, and there is no overlay, respectively. - eav