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

ほぼ全員エンジニアという弊社で、主にデザインとコーディングを担当しているデザイナーの池島です。
(デザイナー業務の他、SEO対策なんかもやってます)

HTML5のフォーム要素に、input type="date" というのがあります。
IEやFirefoxなど、非対応のブラウザもまだ多いのですが、日付を入力するときに、カレンダーが出てくると分かりやすいですよね。
先日担当したデザイン・コーディングの中で、日付選択フォームのスタイル変更も行いましたので、備忘録も兼ねて、その方法を書いておこうと思います。

デザイン例

ブラウザ(MacのChrome)のデフォルトだとこんな感じ

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

今回は、スピンボタンとクリアボタンはなくして、カレンダーを出すボタンだけにしてしまいます。
角丸の外枠と、カレンダーアイコンのボタンで構成します。

作り方

1. 外枠のスタイルを作ります

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

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

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

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

4. カレンダー表示ボタンをlabelのボタンと同じ大きさ・位置に調整します。

「本物のボタン」を「見た目だけボタン」の上に載せます。
位置とサイズを合わせるために、半透明の背景色を置くと分かりやすくなります。
ボタンの位置にカーソルを載せないと出現しないので、気をつけましょう。

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;
}

5. ボタンの背景色を透明にして完成!

ボタンの背景色を
background: transparent;
と変更します。

対応ブラウザについて

これを書いている今現在、対応ブラウザはChrome、Edge、OperaとiOS版のSafari(iOSのSafari,Chromeで一部機能が非対応)となっています。

非対応のブラウザでは、テキスト入力フォームとして動作します。
yyyy/mm/dd のように、フォーマットを注意書きなどで指定しておくといいかもしれません。
MacのFirefoxでの見た目

とてもステキな機能なのに、IEやSafariのようなOS標準のブラウザで対応していないのが残念です。
PCを買って来たまま使ったりする人にこそ、必要な機能ではないでしょうか。
他の機能も含め、今後の対応に期待したいところです。

参考

input[type=’date’]の見た目をCSSで変更する - R42日記
<input type=”date”>をcssとfontAwsomeで使いやすくする - Qiita

このエントリーをはてなブックマークに追加