【jQuery】selectボックスのレイアウト変更

さて、今回はselectをデフォルトの設定ではなく、こちらで自由にデザインを変更する際の方法をメモしてこう。

とはいえ、今回は簡単。

appearance : none;

を記述するだけ。

まぁ、ブラウザ間で互換性のあるものにするためには

-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;

このように書いておけば安全でしょう。

【番外編】高さを揃えるためには 

selectボックスを横の要素と高さを揃える為の方法をメモ。

まず、普通にheightだけを設定してみる。

遠目で見ると、一見問題なさそうだが、よく見るとズレている。

じゃあline-heightにしてみる。

 今度は揃った。

でも…、IEだとこうなる。

全部のブラウザの高さを揃えるためには、どちらも設定しなくてはいけない。

height:40px;

line-height:40px;

こんな感じ。

まぁ、デザインによってborder-radiusやらを弄って頂ければと。

selectは結構ややこいから載せることが多そうだ。

今日はこんなところで。