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!

html css webkit BenM
quelle
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/

Frank Elternteil
quelle
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>
Erweitern Sie das Snippet

Laiacy
quelle
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.

Martin Schilliger
quelle
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
25

Ich denke, was Sie wollen, ist:

select {
  direction: rtl;
}

hier herumgespielt: http://jsfiddle.net/neilheinrich/XS3yQ/

nheinrich
quelle
9
Cool, aber der Pfeil geht dann nach links. Was ist, wenn sowohl Text als auch Auswahlpfeil nach rechts ausgerichtet werden sollen?
Baptiste
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.

Ashish Sharma
quelle