text-align: rechts op <select> of <option>

Does anyone know if it's possible to align text to the right of a

53
toegevoegd
Bekeken: 7
de bron
ro ru fr es pt de hi bn ar uz be

4 antwoord

Je zou kunnen proberen het "dir" -attribuut te gebruiken, maar ik weet niet zeker of dit het gewenste effect zou hebben?

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

56
toegevoegd
de bron
Dit is een verschrikkelijk idee jongens. RTL is bedoeld voor talen die tekens van rechts naar links tekenen, en zal de inhoud die u in zo'n optie plaatst, zeer verpesten als die inhoud in een LTR-taal is geschreven. Een datum als "10 Aug 2017" zal bijvoorbeeld tekenen als "Aug 2017 10". Je hebt GEEN controle over wat het doet met je tekst. Gebruik dit NIET.
toegevoegd de auteur devios1, de bron
Lijkt het niet op een vuile hack om het de juiste look te geven zonder na te denken over hoe het in sommige speciale gevallen zou worden verwerkt?
toegevoegd de auteur Sergei Basharov, de bron
@SergeyBasharov heb je een betere oplossing?
toegevoegd de auteur chacham15, de bron
Dit werkt niet in alle gevallen: yields "x 42" 23. rtl verandert ook hoe het wordt gelezen in een schermlezer.
toegevoegd de auteur Jason T Featheringham, de bron
Eigenlijk is dat perfect. Ik gebruikte het kenmerk uiterlijk: none; toch, dus de positie van de vervolgkeuzelijst doet er niet toe. Bedankt!
toegevoegd de auteur BenM, de bron
IMHO dit is slecht om twee redenen. 1. Het is semantisch verkeerd. 2. In Chrome 30 verplaatst dir = "rtl" de pijl die de vervolgkeuzelijst naar links aangeeft.
toegevoegd de auteur feklee, de bron
RTL - is de tekstrichting (als voorbeeld voor Arabische tekst) jsfiddle.net/iegik/YSJU7/170
toegevoegd de auteur iegik, de bron

De volgende CSS zal zowel de pijl als de opties rechts uitlijnen:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

select { text-align-last: right; }
option { direction: rtl; }
<!-- example usage -->
Choose one:
</div> </div>
30
toegevoegd
de bron
Perfect! Bedankt. BEIDE pijl en opties naar rechts zoals gewenst!
toegevoegd de auteur Steve Danner, de bron
@Laiacy Wow, het werkte! Je bent geweldig! Bedankt.
toegevoegd de auteur Ryan, de bron
Dit lijkt niet te werken voor de optiewaarden wanneer ik op de vervolgkeuzelijst klik (tenminste in Windows Google Chrome). Het werkt alleen voordat de vervolgkeuzelijst wordt geschakeld.
toegevoegd de auteur Ryan, de bron
Bedankt @Laiacy - Dit is fantastisch! Ik verwacht dat je veel meer up-stemmen zult krijgen.
toegevoegd de auteur pshep123, de bron
Dank aan u @ pshep123. Ik stel je opmerking zeer op prijs :)
toegevoegd de auteur Laiacy, de bron
@Ryan, ik heb mijn antwoord bewerkt. Nu van toepassing op de select- en de optiewaarden in de vervolgkeuzelijst. Laat me weten of het voor jou werkt
toegevoegd de auteur Laiacy, de bron
Voor mij is dit het antwoord. Ik wilde de kleine pijl aan de rechterkant behouden, maar de opties moeten goed uitgelijnd zijn => dit is het antwoord dat dat bereikt
toegevoegd de auteur Unchained, de bron
Perfecte oplossing. Bedankt
toegevoegd de auteur Kicsi Viziló, de bron

Ik denk dat wat je wilt is:

select {
  direction: rtl;
}

fiddled here: http://jsfiddle.net/neilheinrich/XS3yQ/

26
toegevoegd
de bron
Koel, maar de pijl gaat dan naar links. Wat als we willen dat zowel de tekst- als de selectiepijl worden uitgelijnd met rechts?
toegevoegd de auteur Baptiste, de bron

De beste oplossing voor mij was om te maken

select {
    direction: rtl;
}

en dan

option {
    direction: ltr;
}

nog een keer. Er is dus geen verandering in de manier waarop de tekst wordt gelezen in een schermlezer of en geen formatteringsprobleem.

25
toegevoegd
de bron
Werkt in iOS 9 Mobile Safari. Super goed!!
toegevoegd de auteur Rockallite, de bron
hoewel deze helemaal rechts en de optie links maakt, maar in mijn geval zal de pijl naar links wijzen.
toegevoegd de auteur Anthony Kal, de bron
Ik heb een vervolgkeuzelijst met waarden als "9:30 AM", "10:00 AM", enz. Dit was de enige oplossing die voor mij werkte (in Safari 9 op Mac).
toegevoegd de auteur Mark Schneider, de bron
In Firefox wordt de huidige (geselecteerde) waarde weergegeven met "AM" naar links ("AM 9:30").
toegevoegd de auteur Mark Schneider, de bron
Ook als u "()" plakt als ( en ) ?
toegevoegd de auteur Martin Schilliger, de bron
En ook in Firefox werkt dit niet correct. Lijkt alleen in Webkit een goed idee ...
toegevoegd de auteur Martin Schilliger, de bron
Ik heb net ontdekt dat IE6-8 (weet niet over IE8 +) dat niet correct weergeeft ...: - /
toegevoegd de auteur Martin Schilliger, de bron
toegevoegd de auteur rm-, de bron