HTML5 日期选择器是否有任何样式选项？答案

【问题标题】：Are there any style options for the HTML5 Date picker?HTML5 日期选择器是否有任何样式选项？
【发布时间】：2013-02-03 11:04:32
【问题描述】：

我真的很喜欢 HTML5 日期选择器。

需要注意的是，我没有看到或预见太多将颜色应用于选择器本身的方式，这将在大多数网站上使用 datepicker 类型的交易破坏者。 <select> 遭受广泛的 JavaScript 替换黑客攻击，原因很简单，人们无法让它变得漂亮。

那么，type='date' 的 HTML 输入是否有任何已知的样式选项？

【问题讨论】：

由于缺乏支持而没有尝试过，但我猜<select> 输入的样式是最小的。
我不得不说，W3C 世界的发展非常缓慢。浏览器开发者/公司更愿意转移到有兴趣的地方。他们（浏览器）将不愿意实现 W3C 中没有明确规定的东西（并且烹饪这些文档需要时间）。人越多，事情就能越快完成。所以，是的，如果您有兴趣，请加入他们的邮件列表并开始参与其中。
为了以后检查更多的伪元素-stackoverflow.com/questions/26852922/…

标签： html input datepicker

【解决方案1】：

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

&lt;input type="date"&gt;

【讨论】：

使用 input[type="date"] 为我的目的工作，也许这也适用于其他人。
请注意，您也可以使用伪类 ::-webkit-clear-button 设置清除按钮的样式
这些伪类的来源将使这成为一个更好的答案......

【解决方案2】：

目前，没有跨浏览器、无脚本的方式来设置原生日期选择器的样式。

至于 WHATWG/W3C 内部发生了什么... 如果这个功能确实出现了，它很可能在CSS-UI 标准或一些Shadow DOM 相关标准之下。 CSS4-UI wiki page 列出了一些从 CSS3-UI 中删除的与外观相关的东西，但老实说，似乎对 CSS-UI 模块没有太大的兴趣。

我认为现在跨浏览器开发的最佳选择是使用基于 JavaScript 的界面实现漂亮的控件，然后禁用 HTML5 原生 UI 并替换它。我认为在未来，也许会有更好的原生控件样式，但也许更有可能将原生控件替换为您自己的 Shadow DOM“小部件”。

令人讨厌的是，这不可用，并且请求标准支持总是值得的。虽然它看起来确实像 jQuery UI 的领导者has tried and was unsuccessful。

虽然这一切都非常令人沮丧，但也值得考虑 HTML5 日期选择器的优势，以及为什么自定义样式很困难，也许应该避免。在某些平台上，日期选择器 looks extremely different 和我个人想不出任何通用的方式来设置原生日期选择器的样式。

【讨论】：

【解决方案3】：

在Zurb Foundation's 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;
}

【讨论】：

【解决方案4】：

仅供参考，我需要更新日历图标的颜色，这对于 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>

希望这对某些人有所帮助，因为大多数情况下 chrome 甚至直接说这是不可能的。

【讨论】：

【解决方案5】：

我结合了上述解决方案和一些试验和错误来得出这个解决方案。

我正在使用 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;}
`

【讨论】：

【解决方案6】：

您可以使用以下 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;
}

&lt;input type="date" value="From" name="from" placeholder="From" required="" /&gt;

【讨论】：