WebKitの<select>
または、より具体的には<option>
要素の右にテキストを揃えることができるかどうかを誰もが知っていますか。これはIEを含むクロスブラウザソリューションである必要はありませんが、可能であれば純粋なCSSである必要があります。
私は両方を試しました:
select { text-align: right }
とoption { text-align: right }
ですが、どちらもWebKit(Chrome、Safari、Mobile Safariのいずれかで動作していません。
どんな助けもありがたいことに受けました!
「dir」属性を使用してみることもできますが、それで目的の効果が得られるかどうかわかりません。
<select dir="rtl">
<option>Foo</option>
<option>bar</option>
<option>to the right</option>
</select>
次の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>
私にとって最良の解決策は
select {
direction: rtl;
}
その後
option {
direction: ltr;
}
再び。そのため、スクリーンリーダーでのテキストの読み方に変更はなく、フォーマットの問題もありません。
選択したプレースホルダーの値を選択ボックスの右に揃える必要があり、オプションを右に揃える必要があるという同じ問題に直面していましたが、方向を使用した場合:rtl;選択していくつかの右パディングを選択して適用すると、選択したプレースホルダーにのみパディングを適用したいため、すべてのオプションもパディングによって右に移動します。
次のスタイルで問題を修正しました。
select:first-child{
text-indent: 24%;
direction: rtl;
padding-right: 7px;
}
select option{
direction: rtl;
}
要件に応じてtext-indentを変更できます。それがあなたを助けることを願っています。