Czy ktoś wie, czy możliwe jest wyrównanie tekstu do prawej <select>
lub dokładniej <option>
elementu w WebKit . Nie musi to być rozwiązanie dla różnych przeglądarek, w tym IE, ale powinno to być czysty CSS, jeśli jest to możliwe.
Próbowałem obu:
select { text-align: right }
i option { text-align: right }
, ale wydaje się, że żadne z nich nie działało w WebKit (albo Chrome, Safari lub Mobile Safari.
Każda pomoc otrzymana z wdzięcznością!
option {text-align: right;}
nie działa.Odpowiedzi:
Możesz spróbować użyć atrybutu „dir”, ale nie jestem pewien, czy przyniesie to pożądany efekt?
<select dir="rtl"> <option>Foo</option> <option>bar</option> <option>to the right</option> </select>
Demo tutaj: http://jsfiddle.net/fparent/YSJU7/
źródło
appearance: none;
tak używałem atrybutu, więc pozycja listy rozwijanej nie ma znaczenia. Dzięki!dir="rtl"
przesuwa strzałkę wskazującą menu rozwijane w lewo.Poniższy kod CSS wyrówna do prawej zarówno strzałkę, jak i opcje:
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>
źródło
Najlepszym rozwiązaniem dla mnie było zrobienie
select { direction: rtl; }
i wtedy
option { direction: ltr; }
jeszcze raz. Nie ma więc zmian w sposobie odczytywania tekstu w czytniku ekranu ani problemu z formatowaniem.
źródło
(
i)
?Myślę, że chcesz:
select { direction: rtl; }
bawiłem się tutaj: http://jsfiddle.net/neilheinrich/XS3yQ/
źródło
Miałem do czynienia z tym samym problemem, w którym muszę wyrównać wybraną wartość zastępczą do prawej strony pola wyboru, a także muszę wyrównać opcje do prawej, ale kiedy użyłem direction: rtl; aby zaznaczyć i zastosować dopełnienie w prawo, aby zaznaczyć, a następnie wszystkie opcje przesuną się w prawo przez wypełnienie, ponieważ chcę zastosować dopełnienie tylko do wybranego symbolu zastępczego.
Rozwiązałem problem, postępując zgodnie ze stylem:
select:first-child{ text-indent: 24%; direction: rtl; padding-right: 7px; } select option{ direction: rtl; }
Możesz zmienić wcięcie tekstu zgodnie z wymaganiami. Mam nadzieję, że to ci pomoże.
źródło