input の日付入力(カレンダー)を編集してオリジナルにする(firefox 対応)

CSS

2023.05.23

input タグの type=’date’ のクリック範囲を拡大してカレンダーのアイコンをオリジナルに変える方法を解説します。

firefox で反映されないことがあるので、プレフィックスをちゃんと付けましょう！

コード

  select {
    background-color: #fff;
  }
  // デフォルトカレンダークリック範囲を広げるために非表示、カスタムカレンダーを表示
  input[type='date']::-webkit-calendar-picker-indicator {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  input[type='date']::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type='date']::-webkit-clear-button {
    -webkit-appearance: none;
  }

  input[type='date'] {
    position: relative;
  }
  .inputDateWrapper {
    position: relative;
  }
  .inputDateWrapper::after {
    position: absolute;
    z-index: 0;
    content: '';
    background: url('/calender.svg') no-repeat center/cover;
    display: block;
    font-size: 24px;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }
  // firefox用
  input[type='date']::-moz-calendar-picker-indicator {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  input[type='date']::-moz-inner-spin-button {
    -moz-appearance: none;
  }

  input[type='date']::-moz-clear-button {
    -moz-appearance: none;
  }