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

2020/02/11 What's Up, サイト制作, 技術系 投稿者:竹内

先日、とあるフォーム内のセレクトボックスにて、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は比較的素直な挙動のブラウザな印象がありますが、まさかこんな細かい部分で不都合がでるとは思いませんでした。
技術者としてこういった細かいノウハウの蓄積をして、さらに他の技術者と共有していくことが重要です。

Office 2010 の延長サポート終了まで

days
9
5
hours
0
7
minutes
3
7
seconds
4
5

カレンダー

1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
     12
3456789
10111213141516
17181920212223
242526272829 
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
    123
45678910
11121314151617
18192021222324
25262728   
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

U・Iターン転職しませんか?
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)