ど素人から毛を生やす。<延>

select要素を「できれば」右揃えしたかったメモ。

Web > css 2019年10月3日(最終更新:2月前)

どもです。

中身が数字のプルダウン。できれば右揃えにしたいところです。
しかし、select要素はtext-alignが効きません。

HTMLやCSSを駆使して無理やり作る方法はggると色々紹介されていますが、本件はそこまで頑張りたくない。
できれば、くらいの心持ち案件なのです。

と思っていると、「右揃えならdir属性を使うと簡単に解決できる」と耳に挟みました。

dirはhtml5で追加されたグローバル属性で、本来は右から左へ書く言語のための属性です。
IEやEDGEには対応していませんが、まぁ今回は良いです。

<select dir="rtl">

おお!
確かに右揃えになっています!

が、プルダウンの矢印が左側になってしまうのが気になりますね。

年齢:
個数:

普通のプルダウンと並べると、違和感がすごい。
アリかナシかで言えば、アリ寄りのナシかなぁ。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)