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

2018/09/28 ｜2026 /01 /05

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

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

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

対処法

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

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

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