I have been struggling with an RTL form issue, specifically with the <select> element. Despite successfully making all labels and inputs RTL, the <select> dropdown appears on top of its label. I have spent hours attempting to position it to the left of the label.
Here is the initial appearance:
After countless hours, I was able to adjust it to look like this:
RTL Form after CSS modification for select element
Although I successfully positioned it to the left of the label, the arrow now overlaps the label!
This small form is driving me insane.
Below is the HTML code:
<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>
This is the CSS for the initial case:
.parent {
direction: rtl;
text-align: right;
}
.parent span{
direction: ltr;
}
This is the additional CSS I implemented to achieve the appearance in the second image:
.item-select select
{
right: auto;
top: 0px;
width: 350px;
direction: rtl;
}
Any suggestions would be greatly appreciated. Thank you!