I have a dropdown box on an Account page where the user can change the language. We are using the standard format:
<label class="item item-input item-select"> <div class="input-label"> Lightsaber </div> <select> <option>Blue (not blue)</option> <option selected>Green (not green)</option> <option>Red (not red)</option> </select> </label>
And that works fine in Chrome - but in Firefox we are seeing this (the addition of the parentheses was important to demonstrate why RTL isn’t working, although it doesn’t have the same problem in Chrome):
It would appear that the class .item-select is trying to use direction:rtl as a workaround to push the text to the right hand side… but this is failing in Firefox where text is altered by RTL.
The final closing parentheses of the selected item is dropped and an opening parenthesis is added to the front of the string. The strings show up unaffected in the actual dropdown list, because RTL is overridden with LTR in the css: .item-select option
How can the selected text be right-aligned without using RTL and breaking FireFox?