Textausrichtung: rechts auf <Auswahl> oder <Option>


82

Wer weiß , wenn es um align Text rechts von einem möglich ist , <select>oder genauer gesagt <option>Element in WebKit . Dies muss keine browserübergreifende Lösung einschließlich IE sein, sondern sollte, wenn möglich, reines CSS sein.

Ich habe beides versucht:

select { text-align: right }und option { text-align: right }, aber keines scheint in WebKit funktioniert zu haben (entweder Chrome, Safari oder Mobile Safari.

Jede Hilfe dankbar erhalten!


3
Irgendwo gibt es einen wirklich dummen Grund, warum option {text-align: right;}es nicht funktioniert.
Bob Stein

Antworten:


80

Sie könnten versuchen, das Attribut "dir" zu verwenden, aber ich bin nicht sicher, ob dies den gewünschten Effekt erzielen würde?

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

Demo hier: http://jsfiddle.net/fparent/YSJU7/


2
Eigentlich ist das perfekt. Ich habe das appearance: none;Attribut trotzdem verwendet, daher spielt die Position des Dropdowns keine Rolle. Vielen Dank!
BenM

31
Dies funktioniert nicht in allen Fällen: <Option> 23 "x 42" </ Option> ergibt "x 42" 23. rtl ändert auch, wie es in einem Bildschirmleser gelesen wird.
Jason T Featheringham

9
Sieht es nicht wie ein schmutziger Hack aus, nur um ihm das richtige Aussehen zu verleihen, ohne darüber nachzudenken, wie er in bestimmten Fällen verarbeitet werden würde?
Sergei Basharov

28
IMHO ist das aus zwei Gründen schlecht. 1. Es ist semantisch falsch. 2. Verschiebt in Chrome 30 dir="rtl"den Pfeil, der das Dropdown-Menü anzeigt, nach links.
Feklee

12
Das ist eine schreckliche Idee, Leute. RTL ist für Sprachen gedacht, die Zeichen in der Reihenfolge von rechts nach links zeichnen, und wird den Inhalt, den Sie in eine solche Option einfügen, sehr vermasseln, wenn dieser Inhalt in einer LTR-Sprache geschrieben ist. Zum Beispiel wird ein Datum wie "10. August 2017" als "10. August 2017 10" gezeichnet. Sie haben KEINE Kontrolle darüber, was es mit Ihrem Text macht. Verwenden Sie dies NICHT.
devios1

71

Das folgende CSS richtet sowohl den Pfeil als auch die Optionen nach rechts aus:

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>


2
Danke @Laiacy - Das ist fantastisch! Ich gehe davon aus, dass Sie noch viel mehr Stimmen bekommen werden.
elPastor

Vielen Dank an Sie @ pshep123. Ich
freue

Dies scheint für die Optionswerte nicht zu funktionieren, wenn ich auf die Dropdown-Liste klicke (zumindest unter Windows Google Chrome). Es funktioniert nur, bevor das Dropdown umgeschaltet wird.
Ryan

1
@ Ryan, ich habe meine Antwort bearbeitet. Gilt nun für die Auswahl- und die Optionswerte in der Dropdown-Liste. Lassen Sie mich wissen, ob es für Sie funktioniert
Laiacy

Für mich ist das die Antwort. Ich wollte den kleinen Pfeil auf der rechten Seite behalten, aber die Optionen sollten rechtsbündig sein => Dies ist die Antwort, die dies erreicht
Unchained

31

Die beste Lösung für mich war zu machen

select {
    direction: rtl;
}

und dann

option {
    direction: ltr;
}

nochmal. Es gibt also keine Änderung in der Art und Weise, wie der Text in einem Bildschirmleser gelesen wird, und kein Formatierungsproblem.


1
Ich habe gerade herausgefunden, dass IE6-8 (ich weiß nicht über IE8 +) das nicht richtig macht…: - /
Martin Schilliger

Und auch in Firefox funktioniert das nicht richtig. Scheint nur im Webkit eine gute Idee zu sein ...
Martin Schilliger

Wenn Ihre Option HTML () enthält, wird das) an den Anfang der Zeile verschoben (vor dem ersten Zeichen links). > _ <
rm-

Auch wenn Sie "()" als &#40;und einfügen &#41;?
Martin Schilliger

1
In Firefox wird der aktuelle (ausgewählte) Wert jedoch mit "AM" links ("AM 9:30") angezeigt.
Mark Schneider


1

Ich hatte das gleiche Problem, bei dem ich den ausgewählten Platzhalterwert rechts neben dem Auswahlfeld ausrichten und die Optionen auch rechts ausrichten muss, aber wenn ich die Richtung verwendet habe: rtl; Um eine richtige Auffüllung auszuwählen und anzuwenden, werden alle Optionen ebenfalls durch Auffüllen nach rechts verschoben, da ich nur die Auffüllung auf den ausgewählten Platzhalter anwenden möchte.

Ich habe das Problem folgendermaßen behoben:

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

select option{
  direction: rtl;
}

Sie können den Texteinzug gemäß Ihren Anforderungen ändern. Hoffe es wird dir helfen.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.