HTML5の日付ピッカーにスタイルオプションはありますか？

109

HTML5の日付ピッカーには本当に満足しています。W3Cが最終的にスラックの一部を取得しているので、このような一般的な入力形式を再発明し続ける必要がないことを知るのは新鮮です。

注意点は、ピッカー自体に色を適用する方法があまり見られない、または予見されていないことです。これにより、ほとんどのサイトでデイトピッカーのようなブレーカーが使用されます。<select>人々はかなりそれを作ることができないという単純な理由のための広範なjavascriptの補充ハックに苦しんでいます。W3Cの土地で何が起こっているのか誰か知っているかどうか知りたいのですが。

これは、もう1つのより大きな質問とペアになっています（答えがわかっている場合に備えて）：W3CやWHATWGに参加して、これらのいくつかの状況を確認できるようにしておく価値はありますか？あらゆる洞察が役立ちます。

html datepicker w3c

— レイボウリング
ソース

それが持っていたサポートの欠如のためにそれを試していませんが、私はスタイリングが<select>入力によって行く最小限であることを推測しています。

— James Coyle 2013

W3Cの世界では物事は非常にゆっくりと進んでいると言わざるを得ません。ブラウザー開発者/会社は、興味のある場所に移動することを好みます。彼ら（ブラウザ）は、W3Cで十分に指定されていないものを実装することに消極的です（そして、それらのドキュメントの調理には時間がかかります）。より多くの人々が物事をより速く達成することができます。だから、はい、興味があれば、メーリングリストに参加して参加してください。

— lepe 2015

220

WebKitは、日付入力のテキストボックスをカスタマイズするために、次の8つの疑似要素を利用できます。

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

したがって、日付の入力でより多くの間隔とばかげたカラースキームを使用できると考えた場合は、以下を追加できます。

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

<input type="date">

スニペットを展開

スクリーンショット

— アンセルム
ソース

2

input [type = "date"]の使用は私の目的で機能し、おそらく他の人でも機能するでしょう。

— Elon Zito 2015年

セパレーターの文字を変更する方法はありますか？

— Keith Ivison 16年

2

疑似クラスでクリアボタンのスタイルを設定することもできます::-webkit-clear-button

— Gabriel Duarte

@Anselmテキストボックス内をクリックして日付ピッカーを開く方法はありますか？

— 忘れた

これらの疑似クラスのソースは、これをさらに良い答えにします...

— Heretic Monkey

22

現在のところ、クロスブラウザを使用せず、スクリプトを使用せずにネイティブの日付ピッカーをスタイル設定することはできません。

WHATWG / W3C内で何が起こっているかについて...この機能が出現した場合、それはおそらくCSS-UI標準またはいくつかのShadow DOM関連の標準の下にあります。CSS4-UI wikiページのリストは、CSS3-UIから削除されましたが、正直に言うと、いくつかの外観に関連するものは、CSS-UIモジュールにおける大きな関心があるようには思えません。

私は今、クロスブラウザー開発のための最善の策は、JavaScriptベースのインターフェースでかなりのコントロールを実装し、HTML5ネイティブUIを無効にして置き換えることだと思います。将来的には、ネイティブコントロールのスタイルが改善される可能性がありますが、ネイティブコントロールを独自のShadow DOM「ウィジェット」に交換できるようになる可能性が高くなります。

これが利用できないのは不愉快なことであり、標準サポートの申請は常に価値があります。jQuery UIのリードが試みて失敗したようですが。

これは非常に思いがけないことですが、HTML5の日付ピッカーの利点と、カスタムスタイルが難しく、おそらく避ける必要がある理由についても検討する価値があります。一部のプラットフォームでは、日付ピッカーは非常に異なって見えます個人的にはネイティブの日付ピッカーをスタイルする一般的な方法を考えることができません。

— キャメロン
ソース

そして1年半後、これらをスタイリングするためのブラウザーの方法はまだありません。さらに、クロスブラウザの日付入力さえありません！IEとFFはまだ協力しません。

— Mr Lister

2

今日はありますか？

— 2018

12

これはZurbのgithubで見つかりました

さらにカスタムスタイリングを行いたい場合。次に、日付コンポーネントのWebkitレンダリング用のすべてのデフォルトCSSを示します。

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

— ジャスティン・ムーア
ソース

1

ありがとう、ジャスティン！月が経つにつれ、物事は本当に明るく見えます。特に、ChromeのWebインスペクターでShadow DOMがより簡単に公開されます。

— レイボウリング

3

上記のソリューションといくつかの試行錯誤を組み合わせてこのソリューションを実現しました。面倒な時間をとってくれたので、これが他の誰かの助けになることを願っていますまた、日付ピッカーの入力がSafariでサポートされていないことにも気付きました...

以下の画像に示すように、styled-componentsを使用して透明な日付ピッカー入力をレンダリングしています。

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`

— ジャンマリー・ダルマソ
ソース

2

次のCSSを使用して、入力要素のスタイルを設定できます。

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}

<input type="date" value="From" name="from" placeholder="From" required="" />

スニペットを展開

— ビグネシュワラン
ソース

テキストボックス内をクリックして日付ピッカーを開く方法はありますか？

— 忘れた

0

FYI、私は同様の特性を有することができていないようでしたカレンダーアイコンの色を更新するために必要なcolor、fillなど、

私は最終的にいくつかのfilterプロパティがアイコンを調整することを理解しました。そのため、どのように色を作成するかを考え出すことはしませんでしたが、幸い、必要なのは、アイコンを暗い背景に表示して、以下をせよ：

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

<body>
 <input type="date" />
</body>

スニペットを展開

うまくいけば、これが一部の人々を助けることを願っています。

— ブレーデンロックウェルネイピア
ソース

1

テキストボックス内をクリックして日付ピッカーを開く方法はありますか？

— 忘れた