読者です 読者をやめる 読者になる 読者になる

この日記は私的なものであり所属会社の見解とは無関係です。 GitHub: takahashikzn

input[type='date']の見た目をCSSで変更する


Chromeでは、inputのtypeとしてdateやdatetimeを指定すると、ネイティブのdatepickerを使えるようになります。
これまではjQuery-UIなどを使って実現していたわけですが、それがもう不要になるわけです。近い将来、他のブラウザでも対応されることは確実でしょう。


しかしこのChromeネイティブdatepicker、見た目が若干よろしくありません。
デフォルトではこんな感じになります。



…まあわからなくも無いですが、以下の点が気になります。

  • ”▼”が微妙。カレンダーのアイコンにすべき。
  • 「年」「月」「日」は不要。区切り文字のスラッシュとカレンダーのアイコンがあれば年月日の入力であることは自明。
  • スピンボタンは邪魔。使う必要性が思い当たらない。

最近、『いかに最小限の視覚要素で、ユーザーの認知を得るか』を考えることが、UIデザインであると思っています。


というわけで調べた所、CSSだけでこのような見た目に変更できました。



以下に設定例を示します。最近LESSに乗り換えたので、厳密にはCSSでは無いことにご注意を。
なお、アイコンはこちらのものを利用させて頂きました。
http://www.premiumpixels.com/freebies/pixicus-icon-set-106-pixel-perfect-icons/

input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='month'],
input[type='time'],
input[type='week'] {
    &::-webkit-inner-spin-button {
        display: none;
    }
}
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field {
    &:after {
        content: "";
    }
    &:not([aria-valuenow]) {
        color: transparent;
    }
}
::-webkit-datetime-edit-text {
    color: darkgray;
}
::-webkit-clear-button {
    margin-left: 0px;
    margin-right: 5px;
}
::-webkit-calendar-picker-indicator {
    color: transparent;
    background: url("../../resource/img/pixicus/calendar.png") no-repeat;
    background-size: auto;
    padding: 2px 2px 4px 1px;
}

Chromeの内部表現を覗く

上記のスタイルは、Chromeが内部で保持しているDOM構造に対して付与しているものです。
では、内部構造はどうやって調べるかというと、デベロッパーツールのオプションである”Show Shadow DOM”をONにするだけ。
すると以下の様な構造を確認できるようになります。