📝

スマホで<input type="date"/>の表示崩れを対策する

2023/06/08に公開

デフォルトスタイルのリセット:
<input type="date"/>のデフォルトスタイルはブラウザ依存なので、CSSでリセットして統一されたスタイルを適用することができる。

css
/* PCとスマートフォンでの<input type="date"/>のスタイルをリセット */
input[type="date"] {
  appearance: none; /* ブラウザのデフォルトスタイルを無効化 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: white;
  /* その他のスタイル指定 */
}


Discussion