HTML5日期选择器有什么样式选项吗？

我对 HTML5的日期选择器非常感兴趣。

警告是，我没有看到或预见的方式应用颜色的选择器本身，这将使日期选择器的使用种交易破坏大多数网站。<select>遭受了广泛的 JavaScript 替换攻击，原因很简单: 人们无法让它变得漂亮。

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

248708 次浏览
小开

目前，还没有跨浏览器、无脚本的方式来设计本机日期选择器。

至于 WHATWG/W3C 内部发生了什么..。 如果这个功能确实出现，它可能是在 CSS-UI标准或一些 暗影 DOM相关的标准之下。CSS4-UI 维基页面列出了一些从 CSS3-UI 中删除的与外观相关的内容，但老实说，似乎没有多少人对 CSS-UI 模块感兴趣。

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

这是恼人的，这是不可用的，并请求标准支持总是值得的。尽管它看起来像是 jQuery UI 的领导者 已经尝试过了，但是没有成功。

虽然这一切都非常令人沮丧，但也值得考虑 HTML5日期选择器的优势，以及为什么自定义样式很困难，也许应该避免。在某些平台上，数据采集器 看起来完全不同和我个人想不出任何通用的方式来设计本地数据采集器。

小开
最佳答案

WebKit 提供了以下8个伪元素，用于定制日期输入的文本框:

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

Screenshot

小开

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

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

小开

我使用了上述解决方案和一些尝试和错误的组合来得到这个解决方案。

我正在使用样式组件渲染一个透明的日期选择器输入，如下图所示:

image of date picker input

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

仅供参考，我需要更新日历图标的颜色，这似乎是不可能的属性，如 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>

希望这有助于一些人作为大部分铬甚至直接说这是不可能的。


提交答案