web-dev-qa-db-ja.com

text-align：<select>または<option>の右

WebKitの<select>または、より具体的には<option>要素の右にテキストを揃えることができるかどうかを誰もが知っていますか。これはIEを含むクロスブラウザソリューションである必要はありませんが、可能であれば純粋なCSSである必要があります。

私は両方を試しました：

select { text-align: right }とoption { text-align: right }ですが、どちらもWebKit（Chrome、Safari、Mobile Safariのいずれかで動作していません。

どんな助けもありがたいことに受けました！

htmlcsswebkit
69
BenM

「dir」属性を使用してみることもできますが、それで目的の効果が得られるかどうかわかりません。

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

デモはこちら： http://jsfiddle.net/fparent/YSJU7/

68
Frank Parent

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

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>
54
Laiacy

私にとって最良の解決策は

select {
    direction: rtl;
}

その後

option {
    direction: ltr;
}

再び。そのため、スクリーンリーダーでのテキストの読み方に変更はなく、フォーマットの問題もありません。

29
Martin Schilliger

私はあなたが欲しいと思う：

select {
  direction: rtl;
}

ここでいじられます： http://jsfiddle.net/neilheinrich/XS3yQ/

25
nheinrich

選択したプレースホルダーの値を選択ボックスの右に揃える必要があり、オプションを右に揃える必要があるという同じ問題に直面していましたが、方向を使用した場合：rtl;選択していくつかの右パディングを選択して適用すると、選択したプレースホルダーにのみパディングを適用したいため、すべてのオプションもパディングによって右に移動します。

次のスタイルで問題を修正しました。

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

select option{
  direction: rtl;
}

要件に応じてtext-indentを変更できます。それがあなたを助けることを願っています。

0
Ashish Sharma