text-align right on select or option

Question

Does anyone know if it s possible to align text to the right of a  lt select gt  or more specifically  lt option gt  element in WebKit  This does not need to be a cross-browser solution including IE  but should be pure CSS if it is possible   I have tried both   select   text-align  right   and option   text-align  right    but neither seems to have worked in WebKit  either Chrome  Safari or Mobile Safari   Any help gratefully received

User · Answer

The following CSS will right-align both the arrow and the options:

_x000D_

select { text-align-last: right; }_x000D_
option { direction: rtl; }

_x000D_

<!-- example usage -->_x000D_
Choose one: <select>_x000D_
  <option>The first option</option>_x000D_
  <option>A second, fairly long option</option>_x000D_
  <option>Last</option>_x000D_
</select>

_x000D_

User · Answer

I was facing the same issue in which I need to align selected placeholder value to the right of the select box  amp  also need to align options to right but when I have used  direction  rtl  to select  amp  applied some right padding to select then all options also getting shift to the right by padding as I only want to apply padding to selected placeholder   I have fixed the issue by the following the style   select first-child    text-indent  24     direction  rtl    padding-right  7px     select option    direction  rtl      You can change text-indent as per your requirement   Hope it will help you

User · Answer

I think what you want is   select     direction  rtl      fiddled here  http   jsfiddle net neilheinrich XS3yQ

User · Answer

You could try using the  dir  attribute  but I m not sure that would produce the desired effect    lt select dir  rtl  gt       lt option gt Foo lt  option gt           lt option gt bar lt  option gt       lt option gt to the right lt  option gt   lt  select gt    Demo here  http   jsfiddle net fparent YSJU7

User · Answer

The best solution for me was to make   select       direction  rtl      and then   option       direction  ltr      again  So there is no change in how the text is read in a screen reader or and no formatting-problem

[html] text-align: right on <select> or <option>

Examples related to html

Examples related to css

Examples related to webkit