2016.10.20

HTML5の日付入力フォームのスタイルを変えてみる

mmmuser

エンジニアばかりのMMMでデザイナーをやっている池島です。デザインにコーディング、さらにSEO対策なども行っています。

ところで、先日担当したプロジェクトの中で、HTML5を使ってカレンダー機能を実装しました。

IEやFirefoxなど、HTML5に非対応のブラウザもあるものの、ユーザー視点に立つとカレンダーUIから日付を選択することができるのは非常に分かりやすいですよね。

日付選択フォームのスタイル変更を行ったりもしたので、備忘録も兼ねてその方法を書いておこうと思います。

Contents

HTML5によるカレンダーのデザイン例
カレンダーのスタイルを変更するコーディング方法
HTML5のカレンダー機能の対応ブラウザについて
参考

HTML5によるカレンダーのデザイン例

MacのChromeではデフォルトで次のように表示されます。

マウスを載せると、矢印が出てきます。（中央）
右の▼がカレンダーを出すボタン、左の上下矢印が年・月・日の数字を１つずつ上下させるボタン（スピンボタン）です。
入力すると、クリアボタンも出てくるようになります。（右）

今回は、次のようにカレンダーを表示するボタンだけを設置する形にしました。
スピンボタンとクリアボタンは無くし、角丸の外枠とカレンダーアイコンのボタンだけで構成します。

カレンダーのスタイルを変更するコーディング方法

1. フォームの外枠のスタイルを作成する

labelに見た目のデザインを作っていきます。
input本体は、枠や背景を消して、文字だけ見えるようにします。

HTMLとCSSはそれぞれ次の通りです。

HTML

<form>
  <lavel>
    <input type="date" />
  </label>
</form>

CSS

label {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 36px;
  border: 2px solid #ccc;
  border-radius: 15px;
}
input[type="date"] {
  position: relative;
  padding: 0 10px;
  width: 200px;
  height: 36px;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  font-size: 14px;
  color: #999;
}

2. カレンダーを表示するボタンを作成する

label内にボタンの見た目だけを作ります。
実際に押すのは、inputの要素のボタンです。

CSSは次の通りです。

CSS

label::before {
  position: absolute;
  content: "";
  top: 0;
  right: -43px;
  width: 36px;
  height: 36px;
  background-color: #06c;
  background-image: url("icon_calendar.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
}

3. 不要な要素を非表示にする

続いて、スピンボタンとクリアボタンを非表示にします。

CSSは次の通りです。

CSS

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

4. ボタンの大きさ・位置を調整する

カレンダーを表示するボタンを、labelのボタンと同じ大きさ・位置に設定します。いわば、「本物のボタン」を「見た目だけボタン」の上に載せるということです。

大きさと位置を調整するためには、半透明の背景色を置くと分かりやすくなります。ボタンの位置にマウスカーソルを載せないと出現しないので気をつけましょう。

CSSは次の通りです。

CSS

input[type="date"]::-webkit-calendar-picker-indicator{
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 0;
  width: 36px;
  height: 36px;
  background: rgba(255, 0, 0, 0.5); // 一旦背景色を付けて、見やすくします
  color: transparent;
  cursor: pointer;
}