「CSS3でセレクトボックスをカスタマイズ」をちょこっとカスタマイズ

  • 投稿日
  • 著者 ituki
  • カテゴリー CSS
  • カテゴリー Program
Pocket
LINEで送る

to-Rさんの記事を読んでやってみたのですが、Xperia arc SO-01C（Android 2.3）とiOS4で動きませんでした。
なのでいろいろいじって動かしてみました。

Xperia arc SO-01C（Android 2.3）でSelectが押せない対処法

Selectにz-indexが指定してあるのがだめみたいです。
下記のようにCSSを修正すると動きました。

div {
	〜中略〜
	z-index: -1; //追加
}

select {
	position: absolute;
	zoom: 1.1;
	/*z-index: 2; はずす*/
	opacity: 0;
}

iOS4でjQueryのchangeが動かない対処法

.change()じゃ動かないようなので、bindに変更しました。
下記のようにjQueryを修正すると動きました。

$("select").change(function(){
	〜中略〜
}).trigger("change");
↓
$("select").bind('change',function () {
	〜中略〜
}).trigger("change");

直った！よかったよかった。
なお、この際jQueryは1.8.2を使用しました。

CSS3 jQuery