ECサイト制作時に、Chromeのデベロッパーツールでスマートフォンの表示を確認していました。
その後実機でチェックしてみるとカートに入れる箇所やセレクトボックスなどが、CSSの指定を無視して角丸とかになっていて困ったので対応を下記に記録。
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;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
background: transparent;
}
button,
input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: none;
outline: none;
background: transparent;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background: #ff0000;
}