I have an html dropdown:
<form>
<select>
<option value="1">Client: Zac Brown Band</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
</form>
I would like to know if there is any possible way to move the little down arrow box to the left side of the list instead of the right? Hopefully there is some nice html or css that will do the trick?
Given the following HTML
<select id="mySelect">
<option value="1">Client: Zac Brown Band</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
you can use the following CSS
#mySelect{ direction: rtl; }
Yes you can use direction
right to left
to move the arrow to the left.
select { direction: rtl; }
rtl : Text and other elements go from right to left
See direction reference.
Remember this will apply style on all select elements so you can use either id or class to apply to the specific select elements.
<select class="reverse">
<option value="1">Client: Zac Brown Band</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
.reverse
{
direction: rtl;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.