LoginSignup
5
3

More than 5 years have passed since last update.

iOSのフォーム要素のスタイルをリセット

Last updated at Posted at 2018-08-25

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

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3