スマホセレクトボックスの脱デフォルトスタイル

2018/02/06 サイト制作, 技術系 投稿者:王

こんな事で困ったことありませんか?

セレクトボックスのデザインがスマホ画面で見るとこんなに変わります。

PC画面

PC画面セレクトボックス

スマホ画面

スマホ画面セレクトボックス

セレクトボックスがスマホのデフォルトスタイルに従ってしまいました。

ちなみにソースはこんな感じです。

ではでは、このデフォルトスタイルから脱出するには、どうすればいいでしょうか?

お試しで下記一行の-webkit-を追加してみました。

CSS

(そもそもwebkitとはなんぞやって思う方、appearanceプロパティについて詳しく知りたり方は、こちらのサイトをご参考ください。)

スマホでもう一度確認してみましょう

スマホでセレクトボックスもう一度確認

おぉ!見事に出来たんじゃないですか!と思いきや、右側にある小さい三角がどこかに消えてしまいました。

スマホセレクトボックス右側にある小さい三角がどこかに消えてしまいました

ここで、疑似クラス::afterを用いて三角を入れてみましょう。

追加したCSS

今回はどうでしょう。確認してみます。

スマホ確認してみます

もう大丈夫みたいですね!

と、ここで Point です。

::afterで入れた三角をクリックしても反応しないことがあります。この状況を避けるため、もう一行入れておくと安心です。

追加したCSS

pointer-eventsはマウスやタッチによるイベントを制御できるCSSプロパティーです。
pointer-eventsをnoneに設定することによって、該当要素がマウスイベントのターゲットになることはありません。よくページ内の文章や画像をコピーされたくない時に使われます。

コードまとめ

最後に、注意点として

ブラウザー対応について、「Can I use_?」で調べてみたところ、IE MobileとMicrosoft Edgeを含め、グローバルブラウザー対応率91.56%(2018年2月時点)となっています。

Firefox固有の-moz-appearanceプロパティは2017年2月から廃止され、-webkit-で対応できるようになりました。

参考サイトはこちら:

いかがでしたか?あなたもスマホセレクトボックスを自分好みにカスタマイズしてみましょう。

カレンダー

      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    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)