CSS

iOSでのsubmit, buttonのデザインをリセットするCSS

More than 3 years have passed since last update.

iPhoneなどでinput要素のボタンにCSSが効かない時の対処方法です。

まず以下のCSSでスタイルをリセットしてから装飾すると反映されます。


参考画像こちら

hoge.jpg






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