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;
}