iPhoneなどでinput要素のボタンにCSSが効かない時の対処方法です。
まず以下のCSSでスタイルをリセットしてから装飾すると反映されます。
参考画像こちら
CSS
/* iOSでのデフォルトスタイルをリセット */
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;
}
SCSS
/* iOSでのデフォルトスタイルをリセット */
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;
&::-webkit-search-decoration {
display: none;
}
&::focus {
outline-offset: -2px;
}
}