144

私はHTML5の日付ピッカーに本当に興奮しています。

注意点は、ほとんどのサイトで日付ピッカーのような取引ブレーカーを使用するピッカー自体に色を適用する方法については、あまり見たり予測したりしないことです。人々がそれをきれいにすることができないという<select>単純な理由のために、広範囲にわたるJavaScript置換ハックに苦しんでいます。

では、HTML入力の既知のスタイリングオプションはありますtype='date'か？

4

6 に答える 6

272

次の8つの疑似要素は、日付入力のテキストボックスをカスタマイズするためにWebKitによって使用可能になります。

::-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">

スクリーンショット

于 2013-04-19T14:17:32.460 に答える
27

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

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

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

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

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

于 2013-02-18T23:11:45.410 に答える
13

ZurbFoundationの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;
}
于 2014-01-24T12:11:30.967 に答える
12

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>

うまくいけば、これが一部の人々に役立つことを願っています。ほとんどの場合、クロムはこれが不可能であると直接言っています。

于 2020-06-04T02:29:14.657 に答える
7

上記の解決策といくつかの試行錯誤を組み合わせて、この解決策にたどり着きました。

次の画像に示すように、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;}
`
于 2018-10-12T06:54:26.320 に答える
3

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

于 2017-09-05T09:54:52.697 に答える