text-align: ngay trên <select> hoặc <option>

Có ai biết nếu có thể căn chỉnh văn bản ở bên phải của một phần tử <select>hoặc cụ thể hơn <option>trong WebKit . Đây không cần phải là một giải pháp đa trình duyệt bao gồm IE, nhưng phải là CSS thuần túy nếu có thể.

Tôi đã thử cả hai:

select { text-align: right }và option { text-align: right }, nhưng dường như cả hai đều không hoạt động trong WebKit (Chrome, Safari hoặc Mobile Safari.

Mọi sự giúp đỡ đều nhận được một cách biết ơn!

Bạn có thể thử sử dụng thuộc tính "dir", nhưng tôi không chắc điều đó sẽ tạo ra hiệu quả mong muốn?

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

Demo tại đây: http://jsfiddle.net/fparent/YSJU7/

CSS sau sẽ căn phải cả mũi tên và các tùy chọn:

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>

Giải pháp tốt nhất cho tôi là làm

select {
    direction: rtl;
}

và sau đó

option {
    direction: ltr;
}

lần nữa. Vì vậy, không có thay đổi nào về cách văn bản được đọc trong trình đọc màn hình hoặc không có vấn đề về định dạng.

Tôi nghĩ những gì bạn muốn là:

select {
  direction: rtl;
}

tìm ở đây: http://jsfiddle.net/neilheinrich/XS3yQ/

Tôi cũng gặp phải vấn đề tương tự, trong đó tôi cần căn chỉnh giá trị trình giữ chỗ đã chọn ở bên phải của hộp chọn và cũng cần căn chỉnh các tùy chọn sang phải nhưng khi tôi đã sử dụng hướng: rtl; để chọn & áp dụng một số phần đệm bên phải để chọn, sau đó tất cả các tùy chọn cũng chuyển sang bên phải bằng phần đệm vì tôi chỉ muốn áp dụng phần đệm cho phần giữ chỗ đã chọn.

Tôi đã khắc phục sự cố theo kiểu sau:

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

select option{
  direction: rtl;
}

Bạn có thể thay đổi thụt lề văn bản theo yêu cầu của mình. Hy vọng nó sẽ giúp ích cho bạn.