【解決法】Safariではinput要素をCSSの「display: none;」で消すことができない

先日、とあるフォーム内のセレクトボックスにて、CSSで消したはずの項目が選択できてしまうと問い合わせがありました。
Mac、iPad、iPhone共通のSafariの仕様によって、消えているはずの項目を選択できる状態になってしまっておりました。

問題発覚までの流れ

今回のフォームのセレクトボックスは

• ・データベースの有効になっている項目を選択させる方式でソース上に項目が記述されているわけではない。
• ・管理画面からその項目を『無効』にしてしまうと、別ページの表示も消えてしまうため『有効』にしたままにしないといけない。
• ・フォームのセレクトボックス内でのみ非表示/選択不可にする必要がある。

といった状況です。

ソースに直接記述されていればコメントアウトや記述そのものを消して対応可能なのですが、今回はデータベースと連動なのでその対応ができずCSSの「display: none;」を使って特定の項目を非表示にする方式を選択しました。
その結果今回はiPhoneのSafariでフォームを操作したお客様が非表示のはずの項目を選択してしまい問題が発覚しました。

Safariの仕様（Mac、iPad、iPhone共通）

Safariの仕様（2020年2月11日現在　MacOSでのSafari Version 13.0.5）を調べたところ、『Safariではinput要素をCSSの「display: none;」で消すことができない』ようです。
特定のOSだけではなく、Mac、iPad、iPhone共通のSafariの仕様のようです。

input要素で複数項目から選択させるselect（セレクトボックス）,radio（ラジオボタン）,checkbox（チェックボックス）はCSSで表示/非表示の制御はひと工夫が必要になってきます。

解決しなかった方法

まずは試して駄目だった方法を紹介します。
以下をすべて複合してみましたが解決しませんでした。

• ×「display: none」ではなく「visibility: hidden;」にしてみる、両方併記してみる。
• ×「!important」をつけてみる。
• ×「-webkit-appearance: none;」でスタイルを初期化してみる。

解決した方法

ネットで調べたところ、
『ねたまめ.com』様の
【jQuery】Safariでselect要素のoptionをCSSで非表示にするお手軽な方法
のなかで、消したい項目をspanで囲んで、spanに対して「display: none;」をあてて消すことができるとありました。
しかも、jQueryで特定の項目をspanで囲むスクリプトもありますので、データベース連動の今回のフォームにそのまま適用できそうです。

こちらを真似させて頂きまして無事解決しましたのでご紹介させて頂きます。

HTML

headでjQueryは読み込んでいるので、以下の記述をHTMLソースのbody内の一番下に設置しました。

Web上のHTMLソース

データベースと連動して出力されたソースはこうなります。

CSS

selector-hideのclassに「display: none;」をあてます。

無事解決

input要素に「display: none;」は効かなくても、任意のタグで囲ってそのタグを消すという方法は盲点でした。
『ねたまめ.com』様の情報がすぐ出てきたので無事早期に解決することができました。

『Safariではinput要素をCSSの「display: none;」で消すことができない』ということを知識として知っていればお客様に迷惑をかけることがなかった出来事でした。

Safariは比較的素直な挙動のブラウザな印象がありますが、まさかこんな細かい部分で不都合がでるとは思いませんでした。
技術者としてこういった細かいノウハウの蓄積をして、さらに他の技術者と共有していくことが重要です。