UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【CSS】セレクトボックスのテキストを右揃えにしたい

こういうリンクっぽいセレクトボックスを実装したいのだが、

f:id:uggds:20210218215617p:plain:w200

セレクトボックスの全体の幅は選択肢中の最長文字列に合わせてしまうので、最短文字列の場合に文字列とアイコンの間に余白ができてしまう

f:id:uggds:20210218215556p:plain:w200

これだと不格好なので修正したい

テキストを右揃えにする

解決するうためにテキストを右揃えにすることを考える

そこで

direction: rtl;

を使う

ヘブライ語アラビア語などのテキストでは右から左に文章を書くので、そのために右に寄せにするためのCSS

日本語などそれ以外では ltr を使う

developer.mozilla.org

これで右寄せにすることができた