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

Web・ブログのこと CSS
Array ( [0] => Array ( [parent] => 0 [slug] => web-tips [name] => Web・ブログのこと ) [1] => Array ( [parent] => 701 [slug] => css [name] => CSS ) )
スポンサーリンク

iOSでCSSが効かない時

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

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

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

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

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

スポンサーリンク

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

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

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

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

修正後イメージ

iOSで見た時のボタンイメージ

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

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

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

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

修正前イメージ

CSSに-webkit-appearanceを追加するだけでOK!

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やブラウザ違いで出てくる現象は泣きたくなる・・・。

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

スポンサーリンク

この記事は私が書きました。

管理人:カズヤ(@kazumiso_s)

31歳、横浜市在住の2児の父。本業はシステムエンジニアで目標は今の会社で取締役になること。「毎日に価値を見出す」ことを信念に置き、未来に役立つ情報を発信しています。難病「好酸球性副鼻腔炎」という嗅覚障害持ち。最近生まれて初めて坊主にした。詳細なプロフィールはこちらから

この記事をシェアはこちらから。

フォローして頂けるとブログの更新情報をお届けできます。

この記事が気に入ったら「いいね!」
最新情報をお届けします。

もう1記事いかがですか。