13

日付のリストを含むフォームがあり、HTML 5input type="date"要素を使用してそれらを表しています。値のないフィールド (つまり、 が表示されているフィールドdd/mm/yyyy) の色を変更して、実際の日付を含むフィールドと簡単に区別できるようにしたいと考えています。

これは可能ですか？私はそれ-webkit-input-placeholderが私が望むことをしたかもしれないと思ったが、そうではないようだ.

4

6 に答える 6

19

Chrome の日付入力にはプレースホルダーがありません。devtools の設定で「Shadow DOM を表示する」にチェックを入れると、調べることができます。

<input type="date">
  #document-fragment
    <div dir="ltr" pseudo="-webkit-date-and-time-container">
      <div pseudo="-webkit-datetime-edit">
      <span aria-help="Day" aria-valuemax="31" aria-valuemin="1" pseudo="-webkit-datetime-edit-day-field" role="spinbutton">dd</span>
      <div pseudo="-webkit-datetime-edit-text">/</div>
      <span aria-help="Month" aria-valuemax="12" aria-valuemin="1" pseudo="-webkit-datetime-edit-month-field" role="spinbutton">mm</span>
      <div pseudo="-webkit-datetime-edit-text">/</div>
      <span aria-help="Year" aria-valuemax="275760" aria-valuemin="1" pseudo="-webkit-datetime-edit-year-field" role="spinbutton">yyyy</span></div>
      <div></div>
      <div pseudo="-webkit-calendar-picker-indicator"></div>
    </div>
</input>

疑似を使用して個別の要素のスタイルを設定できます (Chrome Canary で動作します)。

::-webkit-datetime-edit-year-field {
  font-weight: bold;
}
于 2013-01-24T19:14:01.493 に答える
7

既存の回答のおかげで、なんとか解決できました。aria-valuetext日付フィールドに値がある場合、月と年のフィールドは属性のみを取得します。これは、日付フィールドが次のようにデフォルト値を表示しているときに、これらの値をスタイルできることを意味します。

::-webkit-datetime-edit-day-field:not([aria-valuetext]),
::-webkit-datetime-edit-month-field:not([aria-valuetext]),
::-webkit-datetime-edit-year-field:not([aria-valuetext]) 
{
  color: #999;
}
于 2013-01-24T21:20:15.640 に答える
6

編集：これはもう機能しません

「プレースホルダー」のテキストを灰色にしたかったのです。@JackBradfordの答えに基づいて、私は使用しています：

::-webkit-datetime-edit-text, /* this makes the slashes in dd/mm/yyyy grey */
::-webkit-datetime-edit-day-field[aria-valuetext=blank],
::-webkit-datetime-edit-month-field[aria-valuetext=blank],
::-webkit-datetime-edit-year-field[aria-valuetext=blank] {
  color: lightgrey;
}
于 2014-10-23T00:34:16.477 に答える
6

Chrome 31 以降 (おそらくそれ以前)、aria-valuetext は null ではなく「空白」です。以下のいずれかの作業

::-webkit-datetime-edit-year-field[aria-valuetext=blank]
::-webkit-datetime-edit-year-field:not([aria-valuenow])

それよりも：

::-webkit-datetime-edit-year-field:not([aria-valuetext])

（関連する回答についてコメントする担当者がいません）

于 2014-01-04T17:10:28.013 に答える
1

placeholder-attribute は現在、入力フィールドではサポートされていないtype="date"ため、スタイルを設定できません。この有効な属性のリストを見てください。

w3.org: "input type=date – 日付入力コントロール"

dateしたがって、Chrome は、 -type をまったく気にしない Safari とは対照的に、実際に正しく実行しています。

于 2013-01-24T17:45:23.637 に答える
0

いくつかのコメントで述べたように、これらのソリューションはいずれも Chrome の最近のバージョンでは機能していないようで、v94 の時点でもこれが当てはまることを確認できます。Eli が言及しているように、疑似要素の属性を選択しようとすると問題があるようです。

要素に属性を設定するために JavaScript を少し使用してもかまわない場合は<input type="date" />、ハックな CSS セレクターを回避策として考え出すことができます。

たとえば、JavaScript を使用してdata-hasvalue、入力に値が含まれたら属性を設定し、次の SCSS を使用しています。

  &[type="date"]:not([data-hasvalue]):not(:invalid):not(:focus) {
    &::-webkit-datetime-edit-text,
    &::-webkit-datetime-edit-day-field,
    &::-webkit-datetime-edit-month-field,
    &::-webkit-datetime-edit-year-field {
      color: rgb(117, 117, 117); // Chrome's default color for input placeholder text
    }
  }

すべての日付入力に対して属性が設定されていることを確認してくださいdata-hasvalue。そうしないと、値が設定されたときにプレースホルダー スタイルのテキストが取得されます。または、反対のことを行い、値が設定されていない場合にのみターゲティングすることで、動作をオプトインします。

于 2021-10-20T15:59:59.537 に答える