iPhoneなどでinput要素のボタンにCSSが効かない時の対処方法。

iOSでCSSが効かない時

デザイン難しい。カズヤ(@kazumiso_s)です。

本日から当ブログのデザインを変更しました！と言っても、主には速度改善で見た目は少しだけ。

新しいデザイン公開前にiPhoneやiPadで動作確認をしていると・・・

検索ボタンのCSSがおかしい！

って時に有効な対処方法をご紹介します。

iOSでinput要素の角が丸くなってCSSが効かない時の対処方法

私のブログで影響が出たのは、検索ボタン。

HTMLのinput要素でタイプがsubmit。

これにCSSをあてて、以下のような四角い青いボタンにしました。

修正後イメージ

これをiPhoneやiPadで見ると・・・

なんか角が丸くなってるぅぅぅ。

って状態になりました・・・。

まぁ使えるからいっか。と放り投げようとしましたが、せっかくデザインを修正したことだし対処することにしましたｗ

修正前イメージ

iOSなどのプラットフォーム独自の装飾仕様をクリアするCSS。

-webkit-appearanceをnoneにしてあげることで問題解決。

とりあえずsubmitタイプのinputだけ有効にさせたかったので、以下のCSSを追加しました。

input[type="submit"] {
   -webkit-appearance: none;
   border-radius: 0;
}

ボタンの角の丸みは不要だったので、border-radius:0を一緒に指定してあげることで、意図したデザインになりました！

プラットフォーム独自の装飾が一切不要であれば、以下のように設定しちゃうと毎回悩まされることがなくなりそうです。

* {
   -webkit-appearance: none;
}

分かってしまえば非常に簡単なこと。
同様の事象でお悩みの方に参考になれば幸いです。

CSSを弄る時に毎回思いますが、知らないと損することが本当に多い。
特にご紹介したような、OSやブラウザ違いで出てくる現象は泣きたくなる・・・。

さらにデザインはブログでしかやる機会がなく、頻繁に手を入れることもないのですぐに忘れてしまう。
一度、仕事としてがっつりデザインを勉強する機会がほしいものです。