iPhone実機でボタンにcssが効かない時の対処

chromeのプレビューだと平気なんですが、iPhone実機で見るとデフォルトっぽいボタンが表示されてて。
これで一度リセットしてあげる必要があるみたいです。

実機と差があるのこわい



sample

See the Pen iPhone実機でボタンのcssが効かない時の対処 by takapen (@takapen) on CodePen.

html

css

/* iPhone用inputリセット */
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 {
  width: 80px;
  height: 30px;
  background: #ccc;
  border:none;
}