福田 お役立ち

メールフォームでセレクトボックスの内容が長すぎてiPhoneで省略されてしまうのを防ぐ

メールフォームでセレクトボックスの内容が長すぎてiPhoneで省略されてしまうのを防ぐ

 

こんばんは、福田です。

 

メールフォームのセレクトボックスで下の画像のように選択肢が省略されて表示されている事ってありませんか?

 

時々省略されていてどれが選びたい値なのか分からない時があります 🙁 

 

そんな時、約に立つのが<optgroup>タグです。

<option>全体を<optgroup>で囲ってやると、iPhoneでも省略されずに表示してくれます!

 

もしくは<option>の最後に<optgroup>を入れてやる。

 

jQueryで複数のメールフォームを一括で対応させたい場合

<option>全体を<optgroup>で囲うパターン

<option>の最後に<optgroup>を入れるパターン

 

これで問題なくiPhoneでも省略されずに表示されるはずです 😆 

 

 

ではでは、夏休みまであと少し頑張りましょ~!