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

109

我真的对HTML5日期选择器感到不安。令人耳目一新的是，W3C终于有了一些懈怠，因此我们不必继续重新发明这种常见的输入形式。

需要注意的是，我对选择器本身应用颜色的方式没有看到或预见到很多，这将在大多数站点上使用日期选择器作为一种破坏交易的方式。在<select>从广泛的JavaScript替代黑客，原因很简单，人们不能让它非常困扰。我很好奇是否有人知道W3C领域正在发生什么？

这在某种程度上与另一个更大的问题（如果您知道答案）配对在一起：是否值得我花时间尝试参与W3C或WHATWG，以便使其中的一些事情逐渐成为现实。任何类型的见解都是有帮助的。

html datepicker w3c

— 赖保龄球
source

由于缺乏支持，因此尚未尝试过，但我认为样式对<select>输入的影响很小。

— 詹姆斯·科伊尔

我不得不说，在W3C世界中进展非常缓慢。浏览器开发人员/公司将更喜欢移至感兴趣的地方。他们（浏览器）将不愿执行W3C中未明确指定的事情（并且编写这些文档需要时间）。更多的人可以更快地实现目标。因此，是的，如果您有兴趣，请加入他们的邮件列表并开始参与。

— lepe 2015年

220

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

展开摘要

屏幕截图

— 安塞尔姆
source

2

使用input [type =“ date”]可以达到我的目的，也许对其他人也可以。

— 伊隆·齐托

有没有人知道改变分隔符的方法？

— 基思·伊维森

2

请注意，您也可以使用伪类::-webkit-clear-button

— 加布里埃尔·杜阿尔特

@Anselm有没有办法在文本框内单击时打开日期选择器？

— forgottofly

这些伪类的来源将使它成为一个更好的答案……

— 异端猴子

22

当前，还没有跨浏览器的，无脚本的本地日期选择器样式样式。

至于WHATWG / W3C内部发生了什么...如果确实出现了此功能，则很可能是CSS-UI标准或某些与Shadow DOM相关的标准。该CSS4-UI wiki页面列出了从CSS3 UI的下降，但说实话几样有关的东西，似乎有不为的CSS-UI模块中的极大兴趣。

我认为，目前最好的跨浏览器开发方法是使用基于JavaScript的界面实现漂亮的控件，然后禁用HTML5本机UI并替换它。我认为，将来可能会有更好的本机控件样式，但更可能的是可以将本机控件替换为您自己的Shadow DOM“小部件”的功能。

令人讨厌的是，它不可用，因此寻求标准支持总是值得的。尽管看起来jQuery UI的领导者似乎已经尝试过并且没有成功。

尽管这一切都令人沮丧，但也有必要考虑HTML5日期选择器的优点，以及为什么自定义样式很难并且可能应该避免的原因。在某些平台上，日期选择器看起来截然不同，我个人无法想到任何样式化本地日期选择器的通用方法。

— 卡梅伦
source

一年半之后，仍然没有一种crosbrowser样式化这些样式。而且，甚至没有跨浏览器日期输入！IE和FF仍然不会合作。

— 李斯特先生，2014年

2

今天有吗？

— aks

12

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

— 贾斯汀·摩尔
source

1

谢谢，贾斯汀！随着时间的流逝，事情真的看起来更加光明。特别是Shadow DOM在Chrome的Web检查器中更容易公开。

— Wray Bowling

3

我结合使用了上述解决方案和一些试验和错误来得出此解决方案。花了我很多时间，让我希望以后能对其他人有所帮助。我还注意到Safari完全不支持日期选择器输入...

我正在使用样式化组件来呈现透明的日期选择器输入，如下图所示：

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

— 让·玛丽·达玛索（Jean-Marie Dalmasso）
source

2

您可以使用以下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="" />

展开摘要

— Vignesh Waran
source

有没有一种方法可以在文本框内单击时打开日期选择器？

— forgottofly

0

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

展开摘要

希望这对大多数人来说可以帮助铬，甚至直接说这是不可能的。

— 布雷登·罗克韦尔·纳皮尔
source

1

有没有一种方法可以在文本框内单击时打开日期选择器？

— forgottofly