Css 是否可以在HTML5输入类型上设置默认占位符文本的样式="；日期“；元素？镀铬的？

我有一个带有日期列表的表单，我使用HTML5

input type=“date”

元素来表示它们。我想更改没有值的字段（即显示

dd/mm/yyyyy

）的颜色，以便与包含实际日期的字段更容易区分

---

这可能吗？我原以为

-webkit输入占位符

可能已经实现了我想要的功能，但似乎没有。

带有

type=“date”

的输入字段当前不支持

占位符

-属性，因此无法设置样式。请查看以下有效属性列表：

---

所以Chrome实际上做得很好，与Safari相反，Safari根本不关心日期类型。

Chrome中的日期输入中没有占位符。如果选中devtools设置中的“显示阴影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>

---

多亏了现有的答案，我成功地解决了这个问题。只有当日期字段有值时，day-month和year字段才会获得

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;
}

从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])

（我没有代表对相关答案发表评论）

我希望“占位符”文本为灰色。根据@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;
}

---

+1为了帮助我在开发工具中找到“Show shadow DOM”，警告似乎是，尽管您可以设置before/after元素的样式，例如：

：-webkit datetime编辑年份字段：before

但您不能设置

：-webkit datetime编辑年份字段[aria valuetext=blank]：before

的样式。（我试图用不同地区的翻译来替换占位符）这个答案似乎最接近。斜杠不会改变颜色。我可以发誓这段代码在我实现它的时候对我有效，但在Chrome59（和Canary61）中它似乎不再对我有效。难道这些规则中的一条不应该让这一年变得灰暗吗？4年后，加入@Michael作为回应。这些似乎都不起作用。您可以选择psuedo元素。但是在Chrome的CSS中，在psuedoelement上选择属性失败。我试过的都不管用。有人知道最新消息吗？

::-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;
}