text-align:<select>または<option>の右側にあります。

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

53

4 答え

あなたは "dir"属性を使ってみることもできますが、それが望ましい効果を生み出すかどうかは分かりません。


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

56
追加された
これは奇妙なアイデアです。 RTLは、文字を右から左の順序で描く言語のためのものであり、そのコンテンツがLTR言語で書かれている場合、あなたがそのようなオプションに入れたコンテンツを非常に酷使します。たとえば、 "10 Aug 2017"のような日付は "Aug 2107 10"と表示されます。あなたはあなたのテキストに対して何をするかを制御できません。これを使用しないでください。
追加された 著者 devios1,
特殊なケースではどのように処理されるかを考えずに、適切な外観を与えるだけで汚れたハックのように見えますか?
追加された 著者 Sergei Basharov,
@ SergeyBasharovあなたはより良い解決策を持っていますか?
追加された 著者 chacham15,
これはすべての場合に機能しません。 は "x 42"を返します23。 rtlはスクリーンリーダーでの読み方も変更します。
追加された 著者 Jason T Featheringham,
実際、それは完璧です。とにかく appearance:none; 属性を使用していたので、ドロップダウンの位置は関係ありません。ありがとう!
追加された 著者 BenM,
IMHOこれは2つの理由で悪いです。 1.それは意味的に間違っています。 2. Chrome 30では、 dir = "rtl" は、ドロップダウンを示す矢印を左に移動します。
追加された 著者 feklee,
RTL - テキストの方向(アラビア文字の例) jsfiddle.net/iegik/YSJU7/170
追加された 著者 iegik,

次のCSSは、矢印とオプションの両方を右揃えします。

<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
追加された
完璧!ありがとう。右の両方の矢印とオプションを希望どおりに!
追加された 著者 Steve Danner,
@ライアシーワウ、それは働いた!あなたは素晴らしいです!ありがとう。
追加された 著者 Ryan,
これは、ドロップダウンをクリックしたときにオプション値として機能しないようです(少なくともWindowsのGoogle Chromeでは)。ドロップダウンが切り替わる前にのみ動作します。
追加された 著者 Ryan,
ありがとう@Laiacy - これは素晴らしいです!私はあなたがさらに多くの票を得ることを期待しています。
追加された 著者 pshep123,
あなたのおかげで@ pshep123。私は本当にあなたのコメントに感謝:)
追加された 著者 Laiacy,
@ライアン、私は私の答えを編集しました。ドロップダウンの選択値とオプション値に適用されます。それがあなたのために働くかどうか私に知らせてください
追加された 著者 Laiacy,
私にとってはこれが答えです。私は右の小さな矢印を残したかったが、オプションは右揃えにする必要があります=>これはそれを達成する答えです
追加された 著者 Unchained,
完璧なソリューション。ありがとう
追加された 著者 Kicsi Viziló,

私はあなたが望んでいると思う:

select {
  direction: rtl;
}

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

26
追加された
クールですが、矢印が左に移動します。テキストと選択矢印の両方を右揃えにしたいのですが?
追加された 著者 Baptiste,

私の最善の解決策は、

select {
    direction: rtl;
}

その後

option {
    direction: ltr;
}

再び。したがって、テキストがスクリーンリーダーでどのように読み取られるか、フォーマットに問題がないかに変化はありません。

25
追加された
iOS 9 Mobile Safariで動作します。すばらしいです!!
追加された 著者 Rockallite,
これは右とオプションのすべてを左に作っていますが、私の場合は左に矢印の位置になります。
追加された 著者 Anthony Kal,
私は "9:30 AM"、 "10:00 AM"などの値を含むドロップダウンリストを持っています。これは私のために働いた唯一の解決策でした(MacのSafari 9)。
追加された 著者 Mark Schneider,
ただし、Firefoxでは、現在の(選択されている)値は左側に "AM"と表示されます( "AM 9:30")。
追加された 著者 Mark Schneider,
また、として "()"を貼り付けるとしますか?
追加された 著者 Martin Schilliger,
また、Firefoxではこれが正しく動作しません。 Webkitだけで良いアイデアだと思う...
追加された 著者 Martin Schilliger,
ちょうどIE6-8(IE8 +について知らない)が正しいものではないことを知りました: - /
追加された 著者 Martin Schilliger,
追加された 著者 rm-,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript