RTL and LTR into a Select element

by Ayyappan Sakthivadivel

HTML

<p>
  This is a RTL block that includes a Select with multiple options.
</p>
<p>
  The problem is that the numbers among the texts must to be LTR. 
</p>
<p>
  I use "span" elements to do so but it is not working in Select > Option elements.
</p>

<h4>Normal LTR</h4>
<div>
  <select>
    <option>One amount <span dir="ltr">15.000</span> coins</option>
    <option>Other amount <span dir="ltr">19،000</span> coins</option>
  </select>
</div>

<h4>Normal RTL with labels</h4>
<div dir="rtl">
  <select>
    <option label="One amount <span dir='ltr'>15000</span> coins">One amount <span dir="ltr">15.000</span> coins</option>
    <option label="Other amount <span dir='ltr'>15،000</span> coins">Other amount <span dir="ltr">19،000</span> coins</option>
  </select>
</div>

<h4>Normal RTL without labels</h4>
<div dir="rtl">
  <select>
    <option class="test">One amount <span dir="ltr">15.000</span> coins</option>
    <option class="test">Other amount <span dir="ltr">19،000</span> coins</option>
  </select>
</div>

<h4>With the RTL directly into the option element</h4>
<div>
  <select>
    <option style="direction:rlt;">One amount <span style="direction:ltr;">15.000</span> coins</option>
    <option style="direction:rlt;">Other amount <span style="direction:ltr;">19،000</span> coins</option>
  </select>
</div>

<h4>Radio buttons RTL</h4>
<div dir="rtl">
  <input type="radio" id="input_1" name="option_1" value="value_1">
  <label dir="rtl" for="input_1">One amount <span dir="ltr">15.000</span> coins</label>
  <br />
  <input type="radio" id="input_2" name="option_1" value="value_2">
  <label for="input_2">Other amount <span dir="ltr">19.000</span> coins</label>
</div>

CSS

div[dir="rtl"] input[type="radio"]+label, 
div[dir="rtl"] select option {
    direction: rtl;
    unicode-bidi: bidi-override;
    text-align: right;

}

option.test{
  border: #f00 solid 1px;
  display: block;
  margin-top: 50px;
  padding: 0 20px;
}