2018.10.09 

【jQuery】Safariでselect要素のoptionをCSSで非表示にするお手軽な方法

Web制作


失敗例

まず、セレクトボックス内のoption要素が一時的に不要になったため、CSSで非表示にしたいと思い、このようにしてみました。

ChromeやFirefoxでは、これで問題なく非表示にできましたが、Safari(PC / iPad /iPhone全て)では効果がありません。ちなみに、hide()でもval()でも効果がありませんでした。

あまり大掛かりにはしたくはないし、非表示にしなくても良くなったらすぐに元に戻したい。
ならばCSSが効く状態にしてしまえば良いということで、spanでクラスを与えることにしました。

解決法

jQueryで指定の要素にspan要素を付与し、それに display: none; を当てる。
これで全てのブラウザに適用することが出来ました。

IEならいざ知らず、まさかSafariでこんな問題が出てくるとは思わなかったので衝撃でした。


  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。