텍스트 정렬 : <select> 또는 <option> 오른쪽

그것의 오른쪽에 정렬 텍스트에 가능하다면 누구 알고 있나요 <select>또는 더 구체적 <option>으로 요소 웹킷을 . IE를 포함한 브라우저 간 솔루션 일 필요는 없지만 가능하다면 순수한 CSS 여야합니다.

나는 둘 다 시도했다 :

select { text-align: right }및 option { text-align: right }, 그러나 둘 다 WebKit (Chrome, Safari 또는 Mobile Safari)에서 작동하지 않은 것 같습니다.

모든 도움을 감사드립니다!

"dir"속성을 사용해 볼 수 있지만 원하는 효과를 얻을 수 있을지 모르겠습니까?

<select dir="rtl">
    <option>Foo</option>    
    <option>bar</option>
    <option>to the right</option>
</select>

데모 : http://jsfiddle.net/fparent/YSJU7/

다음 CSS는 화살표와 옵션을 모두 오른쪽 정렬합니다.

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

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

저에게 가장 좋은 해결책은

select {
    direction: rtl;
}

그리고

option {
    direction: ltr;
}

다시. 따라서 화면 판독기에서 텍스트를 읽는 방법에 변화가 없으며 서식 문제도 없습니다.

나는 당신이 원하는 것은 다음과 같습니다.

select {
  direction: rtl;
}

여기에 fiddled : http://jsfiddle.net/neilheinrich/XS3yQ/

선택한 자리 표시 자 값을 선택 상자의 오른쪽에 정렬하고 옵션을 오른쪽에 정렬해야하지만 방향을 사용할 때 같은 문제에 직면했습니다. rtl; 선택한 자리 표시 자에만 패딩을 적용하고 싶기 때문에 일부 오른쪽 패딩을 선택하고 적용한 다음 모든 옵션이 패딩으로 오른쪽으로 이동합니다.

다음 스타일로 문제를 해결했습니다.

select:first-child{
  text-indent: 24%;
  direction: rtl;
  padding-right: 7px;
}

select option{
  direction: rtl;
}

요구 사항에 따라 텍스트 들여 쓰기를 변경할 수 있습니다. 도움이되기를 바랍니다.