スマホで見るとbutton要素が違う色で角が丸く表示される時の対処法

9月 28, 2018

iOSでは、ご丁寧にもinput要素を自動で角丸・グラデーションにしてしまうらしいです。
ので、PC版でこうして表示されているsearch, sendボタンが、

スマホではこうなってしまう。

ずっとダサいと気にしていたので、調べて直しました。

対処法

以下CSSをstyleタグ内に追記して、リセットします。

今回、searchボタンはimput要素、sendボタンはbutton要素だったので、それぞれ追記した結果、綺麗に直せましたよ。

ちょっとしたUIでも、修正すると気持ちいいですね。