INPUT type="date"のカレンダーアイコン(calendar-picker-indicator)を
変更する2つの方法 - FontAwesome Webアイコン、画像アイコンに変更


FORM INPUT type="date"のカレンダーアイコン(calendar-picker-indicator)を好みのFontAwesome Webアイコンまたは画像アイコンに変更 する方法を紹介します。 INPUT type="date"のカレンダーアイコンのデフォルト画像はつぎのとおりです。

これらを実現するためには、FontAwesomeが同梱されたBootstrap 4を使用します。

1. FontAwesome Webアイコンに変更する2. 画像アイコンに変更

1. FontAwesome Webアイコンに変更する

FontAwesome Webアイコンは、つぎの「FONT AWESOME v.4.7.0」ページにありますので参照してください。

・FONT AWESOME v.4.7.0
  https://fontawesome.bootstrapcheatsheets.com/
・"calendar"で検索するとつぎのアイコンが参照できます
  

FontAwesome Webアイコンに変更する方法は以下のとおりです。

先ず、FontAwesome CSSをBootstrapCDNサイトからインクルード

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

HTML

<input type="date">

FontAwesome Webアイコン変更CSS


「FONT AWESOME v.4.7.0」ページで必要なアイコンを表示して、
copyボタンをクリック→CSS Ruleをクリックすると、
content:"\f073";
がコピーできます。
この\f073を下コードの11行目に設定します。

/* 引用;https://codepen.io/andyftp/pen/EQoKxq */

input[type="date"] {
    position: relative;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
    font-family: FontAwesome;
    content: "\f073";  /* FontAwesome Webアイコンここに設定 */
    color: #555;
    padding: 0 5px;
}

/* change color of symbol on hover */
input[type="date"]:hover:after {
    color: #bf1400;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
z-index:100;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

 /* adjust clear button */
 input[type="date"]::-webkit-clear-button {
     z-index: 1;
 }

まとめ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INPUT type="date"のカレンダーアイコンをFontAwesome Webアイコンに変更するデモ</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* 引用;https://codepen.io/andyftp/pen/EQoKxq */
input[type="date"] {
    position: relative;
}
/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
    font-family: FontAwesome;
    content: "\f073";  /* FontAwesome Webアイコンここに設定 */
    color: #555;
    padding: 0 5px;
}
/* change color of symbol on hover */
input[type="date"]:hover:after {
    color: #bf1400;
}
/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
z-index:100;
}
/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}
 /* adjust clear button */
 input[type="date"]::-webkit-clear-button {
     z-index: 1;
 }
</style>
</head>
<body>
<h3>INPUT type="date"のカレンダーアイコンをFontAwesome Webアイコンに変更するデモ</h3>
<input type="date">
</body>
</html>

2. 画像アイコンに変更する

FontAwesome Webアイコンに変更する方法は以下のとおりです。

先ず、画像カレンダーアイコンを用意します
・商用利用可能な無料のアイコンをすぐにダウンロードできるアイコン素材配布サイト
https://icon-rainbow.com/tag/%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC/
・カレンダー アイコン ? ダウンロード 613 カレンダー アイコン 無料
https://icon-icons.com/ja/%E6%A4%9C%E7%B4%A2/・・・・・

HTML

<input type="date" id="cal-date">

画像アイコン変更CSS

変更する画像アイコンのファイル名を、下ソースコードの19行に設定します。

input[type="date"]{
    width: 125px;
    position: relative;
}

input[type="date"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
}
 
input[type="date"]::-webkit-clear-button{
    -webkit-appearance: none;
}
 
input[type=date]::-webkit-calendar-picker-indicator {
    /* position: absolute;   width: 100%;  height: 100%; */
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(http://urbanqee.com/html/nenrei/img/calender-icon-blue-w16.jpg) no-repeat;
    width: 16px;
    height: 16px;
    border-width: thin;
}

input#cal-date {
  border:1px solid gray; 
  border-radius:10px;
  box-shadow: none;
  padding: 2px 3px;
}

input#cal-date:focus {
  outline: none;
}

まとめ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INPUT type="date"のカレンダーアイコンをFontAwesome Webアイコンに変更するデモ</title>
<style>
input[type="date"]{
    width: 125px;
    position: relative;
}
input[type="date"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
}
input[type="date"]::-webkit-clear-button{
    -webkit-appearance: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
    /* position: absolute;   width: 100%;  height: 100%; */
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(http://urbanqee.com/html/nenrei/img/calender-icon-blue-w16.jpg) no-repeat;
    width: 16px;
    height: 16px;
    border-width: thin;
}
input#cal-date {
  border:1px solid gray; 
  border-radius:10px;
  box-shadow: none;
  padding: 2px 3px;
}
input#cal-date:focus {
  outline: none;
}
</style>
</head>
<body>
<h3>INPUT type="date"のカレンダーアイコンを画像アイコンに変更するデモ</h3>
<input type="date" id="cal-date">
</body>
</html>





 最終更新日:2021. 4.17(初版)