input,textareaのCSSをリセット -iOS Safari –

iOS SafariやFirefoxのフォーム要素にCSSでデザインを設定しても狙った通りにならないことがある。
これはユーザーCSSを無視してブラウザのデフォルトスタイルが優先されるからだ。

appearanceにベンダープレフィクス（-webkit-）をつけて、値をnoneにすれば初期化できる。

  input,textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-appearance: none;
    max-width: 100%;
  }

input,textarea {

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-webkit-appearance: none;

max-width: 100%;

}

メモしておく。

関連