PR

input type=”date”で、どこをクリックしてもカレンダーが表示されるようにする。

HTML/CSSを学ぶ

こんにちは。今回はinputタグについてです。最近仕事で出くわしたので紹介します。(ブラウザによっては動作しない可能性があります。Chrome/Firefoxで動作確認)

input type=”date”は、次の画像のように日付を入力することができます。

日付を直接入力、矢印キーもしくは要素内のボタンで選択、そして右端の矢印をクリックでカレンダーから選択できます。クリックしたものに応じて動作が変わりますが、どこをクリックしてもカレンダーを表示します。
方法としては、右端のカレンダーを表示するボタンを全体に広げることによって機能を実現します。

必要ないボタン類を非表示に

まずはいらないボタンを消しましょう。それぞれのボタンにスタイルを適用するには以下のような擬似セレクタを使います。

表示を消すにはdisplay: none;ではなく-webkit-appearance: none;を使います。

<input type="date">
/*一応幅を決めておきます*/
input[type="date"] {
    width: 200px;
}
input[type="date"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
}
input[type="date"]::-webkit-clear-button{
    -webkit-appearance: none;
}

これで2つのボタンが消えます。

右端の黒矢印ボタンを全体に広げる

次に右端のボタンを広げます。擬似セレクタは-webkit-calendar-picker-indicatorです。
サイズを縦横100%にし、positionプロパティを使って左端を基準に配置し直します。

input[type="date"]{
    width: 200px;
      
    /*忘れずに書きましょう。*/
    position: relative;
}
input[type=date]::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
}

このままだと矢印が残ってしまう(下記画像)ので、最後にopacity: 0;にして完全に透過します。

input[type=date]::-webkit-calendar-picker-indicator {
    /*省略*/
    opacity: 0;
}

これで完成です!入力欄のどこをクリックしてもカレンダーが表示されるようになりました。

こちらもチェック チェックボックスやラジオボタンのカスタマイズも知りたい人は・・・
チェックボックスとラジオボタンのデザインをCSSで変更する方法を超絶優しく解説する

最後に

いかがでしたでしょうか?もしカレンダー表示に不便を感じていたらお試しください。

この記事を書いた人
小林 秀樹

Web制作フリーランス9年目|ディレクター・フロントエンドエンジニア
「世界一初心者に優しい」→セカヤサ。

コーポレートサイトやLP、メディア立ち上げまで幅広く対応。コーディングを軸に、UX設計・SEOライティング・サイト運用まで一貫対応。

法律系オウンドメディア立ち上げ支援では、特定のキーワードでのSEO1位を実現し問い合わせ獲得に貢献。また大手専門学校サイトの大規模リニューアル(100ページ超)でのディレクションと実装の両面の経験あり。

最近では、AIツールによる自社サービスUI制作や、ChatGPTを活用した記事執筆フローの構築など、AI時代に対応した制作手法の実践にも注力している。

zenn:
https://zenn.dev/hideki_climax

制作実績:
https://tan-band-c66.notion.site/37abe7077b184b338fd8f53f6873ca1d

小林 秀樹をフォローする
HTML/CSSを学ぶ
スポンサーリンク
シェアする
小林 秀樹をフォローする

コメント

タイトルとURLをコピーしました