RTL形式の問題<select>ドロップダウン - イオン性

Question

RTL形式の問題、特に<select>の問題があります。私はすべてのラベルと入力をRTLにするように管理しましたが、<select>を除き、ラベルの上にドロップダウンが表示されます。私はそれをラベルの左に表示させようと数時間を費やしました。ここで

は、それがどのように見えるかです：

RTL Form

を数時間後、私はこのようにそれを作るために管理：あなたは私がそれを作るために管理している見ることができるように

RTL Form after adding CSS for select item

ラベルの左にあるが、矢印はラベルの上にある！

この小さなフォームが私を夢中にしています。ここで

は私のHTMLです：

<div class="list list-inset"> 
       <form name="registrationForm" class="parent"> 
    <div class="item item-divider"> 
    المعلومات الشخصية 
    </div> 
    <label class="item item-input"> 
    <span class="input-label">الإسم</span> 
    <input type="text" name="nameInput" ng-model="newUser.first_name" required> 
    </label> 
    <label class="item item-input"> 
    <span class="input-label">الإيميل</span> 
    <input class="emailinput" type="email" name="emailInput" ng-model="newUser.email" required> 
    </label> 
    <label class="item item-input item-select"> 
    <span class="input-label">المدينة</span> 
    <select ng-model="newUser.billing_address.state" name="cityInput" ng-init="newUser.billing_address.state='الرياض'" required> 
     <option>الرياض</option> 
     <option>جدة</option> 
     <option>الدمام</option> 
    </select> 
    </label> 
</div> 

これは最初のケースのためのCSSです：

.parent { 
    direction: rtl; 
    text-align: right; 
} 
.parent span{ 

    direction: ltr; 
} 

これは私が追加CSSであり、それは第二の画像のように見える作られた：

.item-select select 

{ 

    right: auto; 
    top: 0px; 
    width: 350px; 
    direction: rtl; 

} 

ご了承ください。ありがとう！

Answer 1

誰かが同じ問題を抱えている場合。それを修正する方法は次のとおりです。

.item-select select { 
padding: 0 16px 0 48px; 
right: auto; 
left: 0; 
direction: rtl; 
width: 350px 
} 

.item-select:after { 
left: 16px; 
right: auto; 
}