些細なことですが、今後も使うことがありそうだったので、備忘録としてまとめ。
HTML の button 要素を iOS で表示したときに、デフォルトの見た目である「角丸＆グレーグラデーション」になるのを無効にする方法です。
今回参考にさせていただいたサイトはこちらから。
【フォーム】iOSのボタンが角丸グラデーションになるのをリセット｜Webデザインラボ
https://www.webdlab.com/labs/ios-button/
CSS はこちら。
button {
-webkit-appearance: none;
border-radius: 0;
margin: 0;
background-color: #FFF;
border: 1px solid #555;
}
ポイントは、2、3行目の -webkit-appearance: none; と border-radius: 0; です。
-webkit-appearance: none; を指定することで、iOS の Safari などで見た時のデフォルトのボタンスタイルを無効にできます。
で、次の border-radius: 0; と指定することで、ボタンの角丸を無効にできます。
なお、ボタンの角丸については、-webkit-appearance: none; を指定した段階で既に無効になってるようでしたが、念のため追加しておきます。
あとは、4行目以降で、お好きな見た目になるようカスタマイズすればOKです。
私は白色＆細い黒縁の四角いボタンにしたかったので、上記のようにしています。
ちなみに、iOS では -webkit-appearance: none; と border-radius: 0; だけで、白色＆黒縁ボタンになったのですが、Android で見たら、一昔前のグレーのボタンのような見た目になったので、細かい指定は必須ですね。
あとは、Android と iOS の両端末で必ず見た目を確認しましょう。
…これは別に言わなくてもやっているとは思いますが、念のため。
以上、iOS で button 要素のデフォルトレイアウトである「角丸＆グレーグラデーション」を無効にする方法でした。
ご参考になれば幸いです。
