Mobile SafariのselectがイケてないのでほぼCSSで擬似select作ってみた

公開

更新

iPhoneのMobile Safariだとoptionの中に長い選択肢がある場合、途中から省略されてしまって選択肢が見えずに困るということがありました。

写真:iPhoneでoptionの選択肢を出現させている。長い選択肢は文章がはみ出ていて全体を理解できない。

フルスクリーンでオーバーレイの検索ボックスという記事を見て、これでselectっぽいものが作れるんじゃないだろうか、と思って作ってみました。

擬似selectのデモ

検証したのは、iOS, chrome, firefox, safari, IEの最新版とAndroid4.3。IEは9以上、Androidが4.3なのは手元の環境がそれしかないからってだけです。js無効でもそれなりに動くけど、選んだ選択肢のテキストが表示されないのと、一度選択肢を選ぶとキャンセル押してもキャンセルできない。

完了、キャンセルボタンを無くすにはもうちょっとjsでゴリゴリ書く必要があるし。あとradioで実装してるのでtabで移動するのにselectの時と挙動が違うのでイライラしたりする。

やっぱりネイティブUIのを真似るのは色んな問題があって悩ましい。こんなややこしいことしなくてもMobile Safariがよしなに表示してくれればいいだけなんだけどな。

参考
フルスクリーンでオーバーレイの検索ボックス