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

Question

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

需要注意的是，我没有看到或预见到太多将颜色应用于选择器本身的方式，这将使日期选择器的使用在大多数网站上成为一种破坏性的行为。

<select>

遭受了广泛的 JavaScript 替换黑客攻击，原因很简单，人们无法将其变得漂亮。

那么

type='date'

的HTML输入有任何已知的样式选项吗？

Answer 1

WebKit 提供以下伪元素，用于自定义

date

、

datetime-local

、

month

、

week

或

time

输入的文本框：

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text

::-webkit-datetime-edit-year-field
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-week-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-hour-field
::-webkit-datetime-edit-minute-field
::-webkit-datetime-edit-second-field
::-webkit-datetime-edit-millisecond-field
::-webkit-datetime-edit-ampm-field

::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

我在 Chromium 的默认“用户代理”样式表中找到了这些属性名称。

请注意，根据输入类型、输入上的

edit-...-field

属性以及用户的区域设置，包含

step

伪元素的某些子集。

因此，如果您认为日期输入可以使用更多间距和荒谬的配色方案，您可以添加以下内容：

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

Answer 2

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

至于 WHATWG/W3C 内部发生了什么…… 如果此功能确实出现，它可能会遵循 CSS-UI 标准或某些 Shadow DOM 相关标准。 CSS4-UI wiki 页面列出了一些从 CSS3-UI 中删除的与外观相关的内容，但说实话，人们似乎对 CSS-UI 模块没有太大兴趣。

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

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

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

Answer 3

仅供参考，我需要更新日历图标的颜色，这对于

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 甚至直接说这是不可能的。

Answer 4

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

Answer 5

我结合使用了上述解决方案并进行了一些尝试和错误，得出了这个解决方案。

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

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

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

<input type="date" value="From" name="from" placeholder="From" required="" />

Answer 7

在

color-scheme: dark

或

date

输入上设置

datetime-local

也将使 Chrome 中的日历图标变为浅色，而无需使用 CSS 过滤器作为解决方法。

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
  border: none;

  color-scheme: dark;
}

<body>
 <input type="date" />
</body>

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

问题描述投票：0回答：7

7个回答

最新问题

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

问题描述 投票：0回答：7

7个回答

最新问题

问题描述投票：0回答：7