CROR

selectタグを装飾する

今回、selectタグを装飾するのは、
スマートフォンサイトのみをターゲットにした、
CSS3「appearance」を使った方法で実装したいと思います。

一部PCでも対応されていますが、まだまだ対応されていないブラウザもある為、
実用的ではないと思います。

PC版で装飾したい場合には、CSSではなくjQueryプラグインで、実装してみてください。
easyselectbox.min.js
https://github.com/kosinix/easyselectbox

select デモ

HTML

CSS

CSS3プロパティ 参考サイト

appearance
フォームのインターフェースを標準的なUIに変更する
http://www.htmq.com/css3/appearance.shtml

box-sizing
ボックスサイズの算出方法を指定
http://www.htmq.com/css3/box-sizing.shtml

border-radius
要素を丸角にする
http://www.htmq.com/css3/border-radius.shtml

jQuery

ボタンをタッチ(クリック)した時のselectを実行するのは、スクリプト側で制御します。

iphoneの場合、

で、セレクトドラムが表示されますが、
Androidでは、フォーカスされるだけで、オプションリストは表示されません。

ではどうするか・・・
フォーカスされた時にclickイベントを起こせば開くのではないか。

そこで、trigger(‘click’)を追加。

ですが、これでもオプションリストは開きませんでした。

ネットの海を徘徊していると、同じような方がいらっしゃいました。

http://stackoverflow.com/questions/14756955/jquery-focus-not-working-on-android

このサイトの回答を参考にした所、Androidでも正常にselectが実行されるようになりました。

コメントを残す

Return Top