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

それが右に整列したテキストに可能かどう誰もが知っている<select>か、より具体的<option>で要素のWebKitを。これは、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>

ここでのデモ：http：//jsfiddle.net/fparent/YSJU7/

次の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;
}

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

私はあなたが欲しいものは次のとおりだと思います：

select {
  direction: rtl;
}

ここをいじる：http：//jsfiddle.net/neilheinrich/XS3yQ/

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

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

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

select option{
  direction: rtl;
}

要件に応じて、テキストのインデントを変更できます。それがあなたを助けることを願っています。