web-dev-qa-db-ja.com

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

HTML5の日付ピッカーについて本当にうれしく思います。 W3Cが最終的にスラックの一部を取り戻していることを知っているのは爽快です。そのため、このような一般的な形式の入力を再発明する必要はありません。

警告は、ピッカー自体に色を適用する方法で私が見たり、予見することはほとんどないということです。これは、ほとんどのサイトで日付ピッカーのような種類の取引ブレーカーを使用しようとしています。 <select>は、人々がそれをきれいにできないという単純な理由で、広範囲にわたるjavascript置換ハックに苦しんでいます。誰かがW3Cの土地で何が起こっているのか知っているのか興味がありますか？

これは、別の大きな質問（回答を知っている場合）と多少組み合わせられています：W3CまたはWHATWGに参加して、これらの事柄のいくつかが日の目を見るようにする時間はありますか？あらゆる種類の洞察が役立ちます。

html5datepickerw3c
89
Wray Bowling

日付入力のテキストボックスをカスタマイズするために、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">

Screenshot

196
Anselm

現在、クロスブラウザ、スクリプトなしでネイティブの日付ピッカーをスタイリングする方法はありません。

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

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

これが利用できないことは迷惑であり、標準サポートを求めることは常に価値があります。 jQuery UIのリードのように見えますが、 試したが失敗しました 。

これはすべてがっかりさせるものですが、HTML5の日付ピッカーの利点、およびカスタムスタイルが困難であり、おそらく避けるべきである理由も考慮する価値があります。一部のプラットフォームでは、datepicker 非常に異なるように見えます であり、個人的にはネイティブdatepickerをスタイリングする一般的な方法は考えられません。

18
Cameron

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;
}
11
Justin Moore

上記のソリューションと試行錯誤の組み合わせを使用して、このソリューションを作成しました。迷惑な時間を取ってくれたので、これが将来他の誰かに役立つことを願っています。また、日付選択ツールの入力がSafariでサポートされていないことに気付きました...

以下の画像に示すように、スタイル付きコンポーネントを使用して、透明な日付ピッカー入力をレンダリングしています。

image of date picker input

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
Jean-Marie Dalmasso

次の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="" />
2
vignesh waran