selectのテキストを中心で揃える方法(safari対応)


selectのテキストを中心に揃えようとすると、safariでは select の text-align:center が効かず、左に揃ってしまう。
なんとかしたいという要望に、調査・対応。

方法の調査

方法1: selectそのものの幅を、selectされたoptionの幅に合わせる

 

方法2: 幅を決めて、その中に(やや強引に)中心寄せする

案2を採用しました。

 

方法2の注意点

余計なcssを削除したり、paddingやmarginを調整する

html

上記リンクでは、要素を指定するのにclassを使っているが、複数ある場合はidで指定したほうが無難か。

のように、selected な値をpに入れる。

css

js

javascriptは、classで指定してもいいが、複数ある場合はidで指定したほうが無難か。

 

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL