Home » トラブル » ◎ [CSS] 「 iOSが勝手に変更してしまう」ボタン型input要素のデザインへの対策まとめ

◎ [CSS] 「 iOSが勝手に変更してしまう」ボタン型input要素のデザインへの対策まとめ

2014年11月1日土曜日

css iOS トラブル


webページを作成していて、type="button"やtype="submit"などのボタン型のinput要素に背景色や角丸をCSSで指定しても、iOSのブラウザ（SafariやChromeなど）では、webkitのappearanceが「push-button」に固定されているのか、CSSの指定は無視される。その結果、「iOSが勝手に変更してしまう」という状態になる。

具体的には
●角丸のradiusを小さく、または角丸無しに指定したとしても、ボタンの左右が半円に見えるほどの角丸がかかる。
●backgroundに濃い色を指定しても、薄めのグラデーションになってしまう。濃い色の背景を想定して文字色を白など明るい色にしているととても見づらくなる。

iOSのブラウザ（SafariやChrome、その他）でのみでおきる現象らしい。Mac OSのappearanceは、iOSとよく似ているが、同じようになることはない。

この現象に最初に気づいた頃（iOS 5）はバグかと思ったが、それから現在のiOS 8まで一貫していることから、それなりの理由のある仕様なのかもしれない。

 サンプル画像：iOSデバイスで見ると、角の丸みが強く濃い色でも薄めのグラデーションになる。画像のiOSはiPad mini2（iOS 8.0.2）、MacOSはMacbook Air（MacOS 10.7.5）など。
指定しているCSSのソース：
input.btn-blue1  {
  ----（略）----
  background: #0000cc;
  color: #fff;
  border: 1px solid #0000cc;
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
}

検証用サンプルページ１

CSSを何も指定していないボタン型input要素の比較
webkitのappearanceによるデフォルトのinput要素のボタン型形状。
iOSの形状は、古めのMacOSのもの（MacOS 10.6.8まで）に近い。MacOS 10.7からは丸みが少ないものになっている。YOSEMITEでも同様。

htmlソース：
<input type="button" value="ボタン" />
<input type="submit" value="サブミット" />
<input type="reset" value="リセット" />

検証用サンプルページ２

いろいろ試した結果、背景に単色の色コードを指定した場合にのみ、この現象が起こることが分かった。

対策まとめ
対策（１）可能ならば、input[type="button"]などの問題の要素をbutton要素に置き換える。button要素なら、iOS-webkitのappearanceの影響を受けない。
CSSソース：
button  {
  ----（略）----
  background: #0000cc; 
  color: #fff;
  border: 1px solid #0000cc;
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}
検証用サンプルページ３

対策（２）問題になるinput要素のappearanceを無効にする（-webkit-appearance:  none; を追加）。またはappearanceをbuttonにする（-webkit-appearance:  button を追加）。
CSSソース：
input.btn-blue2    {
  ----（略）----
  background: #0000cc; 
  color: #fff;
  border: 1px solid #0000cc;
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
  -webkit-appearance: none;
  ----または----
  -webkit-appearance: button;　
}
検証用サンプルページ４

対策（３）背景色を指定する際、単色の場合だけ「iOSが勝手に変更してしまう」状態になるので、「-webkit-gradient」を使って、グラデーションの指定にする。色が変化するグラデーションはそのまま使える。単色にしたい場合は、グラデーションの色の変化を同色にする。
CSSソース：
input.btn-blue5　{
    ----（略）----   
　background: -moz-linear-gradient(top, #3378e7, #164fac 50%, #143771);
　background: -webkit-gradient(linear, left top, left bottom, from(#3378e7), color-stop(0.5, #164fac), to(#143771));
　background: -o-linear-gradient(top, #3378e7, #164fac 50%, #143771);
　background: linear-gradient(top, #3378e7, #164fac 50%, #143771);    
　color: #fff;
　border: 1px solid #0000cc; 
　-webkit-border-radius: 3px; 
　-moz-border-radius: 3px; 
　border-radius: 3px;
  }
検証用サンプルページ５

対策（４）背景色を指定する際、色コードではなく、外部のリンク画像にする。フラットにするなら、その色のみの単色で塗りつぶした画像（サイズは極小さくて構わない）を使用する。
CSSソース：
input.btn-blue3    {
  ----（略）----
  background: #0000cc url(img/bg-mediumblue2.png); 
  color: #fff;
  border: 1px solid #0000cc;
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}
検証用サンプルページ６

もちろん背景画像はグラデーションなどでも構わない。
検証用サンプルページ７

蛇足
span要素に「-webkit-appearance: push-button」や「-webkit-appearance: button」を指定したらどうなるか試してみた。
結果は、iOSでは、なにもおきない。ただテキストが表示されるだけ。
MacOSでは、10.7.5や10.6.8でそれぞれのボタン型形状が表示された。10.8.5以上ではiOSと同じになった。

検証用サンプルページ８

By 時刻:
ラベル: , ,