Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
36
Help us understand the problem. What is going on with this article?
@MssKnd

<input type="date">をcssとfontAwsomeで使いやすくする

More than 5 years have passed since last update.

<input type="date">をcss(とfontawsome)を使ってシンプルで見やすくカスタマイズします。
cssとfontAwesomeしか使いませが、webkitを多用しています。
なので現状はchromeとsafariでしか動作しません。

↓これが何もしていない<input type="date">

ボタンとか多くて使いづらいですね。
ここから、スピンボタンを削除したり、年月日を削除したりしてみます。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>sample</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <input type="date">
  </body>
</html>

fontAwesomeのリンクを忘れずに。

style.css
/* スピンボタン(上下ボタン)を非表示 */
input[type=date]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* 無入力時の 年/月/日 を / / にする */
input[type=date]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
input[type=date]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type=date]::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
  color: transparent;
}
/* /の色を変える */
input[type=date]::-webkit-datetime-edit-text {
  color: #666;
}
/* clearボタンの非表示 */
input[type=date]::-webkit-clear-button {
  -webkit-appearance: none;
}
/* カレンダーのインジケータ(▼)を非表示 */
input[type=date]::-webkit-calendar-picker-indicator {
  color: transparent;
  position: relative;
}
/* fontAwesomeのカレンダーアイコンをインジケータにする */
input[type=date]::-webkit-calendar-picker-indicator:before {
  color: #666;
  font-family: FontAwesome;
  /*content: "\f073";*/ /* fa-calendar */
  content: "\f133"; /* fa-calendar-o */
  position: absolute;
  left: -5px; /* ここら辺はいい感じの塩梅で */
  top: -5px;  /* ここも */
}

fontAwesomeには2つのカレンダーアイコンがあります。
使いたいアイコンによって、content:の値を変えてください。

結果

<i class="fa fa-calendar"></i>
スクリーンショット 2015-07-15 1.03.19.png
<i class="fa fa-calendar-o"></i>
スクリーンショット 2015-07-15 1.08.02.png
かなりシンプルになっていい感じです。

私事

QiitaってfontAwsome使えるんですね。
記事書いてて気がつきました。

36
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
MssKnd
ネットワークエンジニアでしたがWebのフロントエンジニアになるようです。
safie
Safie(セーフィー)はクラウド録画カメラシェアNo.1!映像プラットフォームを開発・運営しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
36
Help us understand the problem. What is going on with this article?