iPhoneでsubmitボタンの装飾が変更されるのを防ぐ
2018年10月16日
お問い合わせフォームなどのsubmitボタンはせっかくcssでデザインしたのにiPhoneだとiPhone独自の装飾が付く。
これを回避するために以下のcssを追加した。
/* button submit for mobile */ input[type="submit"], input[type="button"] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; } input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration { display: none; } input[type="submit"]::focus, input[type="button"]::focus { outline-offset: -2px; } input[type="number"], input[type="text"] { -webkit-appearance : none; property: value; border-radius: 0; border: 1px solid #CCC; } input[type="number"] { property: value; width: 45px; }