スマホでボタンに装飾したのに色や線が変。ついでにスマホ絡みの設定一式【css】

hoge

ボタンとかのフォーム要素にcssを設定したのに、スマホで確認すると、なんか色とか線とか、変。

iPhoneのsafariでの、あるある。

 

スマホブラウザが、フォーム要素にオリジナルの設定をしているので、それを解除するcssを記述する必要がある。

 

*{
	-webkit-appearance: none; /* スマホでフォーム要素 reset */
}

 

スマホ絡みの設定を、他にもまとめてこんな感じ。
定番と化している。

*{
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* スマホでリンクタップ時の枠を透明にする */
	-webkit-appearance: none; /* スマホでフォーム要素 reset */
	box-sizing:border-box;
}
html,
body{
	-webkit-touch-callout:none; /* リンク長押しのポップアップを無効化 */
	-webkit-user-select:none; /* テキスト長押しの選択ボックスを無効化 */
	-webkit-text-size-adjust:100%; /* ブラウザ側での文字サイズの自動調整を無効化 */
}
::-webkit-scrollbar{ /* スクロールバーを消す */
	width:0px;
	display:none;
}