144

我对 HTML5 日期选择器感到非常兴奋。

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

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

4

6 回答 6

272

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

截屏

于 2013-04-19T14:17:32.460 回答
27

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

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

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

令人讨厌的是，这不可用，并且请求标准支持总是值得的。虽然看起来 jQuery UI 的领导者已经尝试过但没有成功。

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

于 2013-02-18T23:11:45.410 回答
13

在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;
}
于 2014-01-24T12:11:30.967 回答
12

仅供参考，我需要更新日历图标的颜色，这似乎无法使用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 甚至直接说这是不可能的。

于 2020-06-04T02:29:14.657 回答
7

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

我正在使用 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;}
`
于 2018-10-12T06:54:26.320 回答
3

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

于 2017-09-05T09:54:52.697 回答