Html HTML5 日期选择器是否有任何样式选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14946091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are there any style options for the HTML5 Date picker?
提问by Wray Bowling
I am really stoked about the HTML5 date picker. It is refreshing to know that the W3C is finally picking up some of the slack so we don't have to keep re-inventing such a common form of input.
我真的很喜欢 HTML5 日期选择器。令人耳目一新的是，W3C 终于弥补了一些不足，因此我们不必继续重新发明这种常见的输入形式。
The caveat is that I don't see or foresee much in the way of applying colors to the picker itself which is going to make the use of the datepicker kind of a deal-breaker on most sites. The <select>suffers from widespread javascript-replacement hacks for the simple reason that people can't make it pretty. I'm curious if anyone knows what's going on in W3C land?
需要注意的是，我没有看到或预见到将颜色应用于选择器本身的方式，这将在大多数网站上使用 datepicker 类型的交易破坏者。在<select>从广泛的JavaScript替代黑客，原因很简单，人们不能让它非常困扰。我很好奇是否有人知道 W3C 领域发生了什么？
This is somewhat paired with another larger question (in case you know the answer): Is it worth my time to try to get involved with the W3C or WHATWG so that some of these things see the light of day? Any sort of insights are helpful.
这在某种程度上与另一个更大的问题相结合（如果您知道答案）：我是否值得花时间尝试参与 W3C 或 WHATWG，以便其中一些事情大放异彩？任何形式的见解都是有帮助的。
回答by Anselm
The following eight pseudo-elements are made available by WebKit for customizing a date input's textbox:
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
So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:
因此，如果您认为日期输入可以使用更多间距和荒谬的配色方案，您可以添加以下内容：
::-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">
回答by Cameron
Currently, there is no cross browser, script-free way of styling a native date picker.
目前，没有跨浏览器、无脚本的方式来设置原生日期选择器的样式。
As for what's going on inside WHATWG/W3C... If this functionality does emerge, it will likely be under the CSS-UIstandard or some Shadow DOM-related standard. The CSS4-UI wiki pagelists a few appearance-related things that were dropped from CSS3-UI, but to be honest, there doesn't seem to be a great deal of interest in the CSS-UI module.
至于WHATWG/W3C内部发生了什么......如果这个功能确实出现，它可能会在CSS-UI标准或一些Shadow DOM相关标准下。该CSS4-UI wiki页面列出了从CSS3 UI的下降，但说实话几样有关的东西，似乎有不为的CSS-UI模块中的极大兴趣。
I think your best bet for cross browser development right now, is to implement pretty controls with JavaScript based interface, and then disable the HTML5 native UI and replace it. I think in the future, maybe there will be better native control styling, but perhaps more likely will be the ability to swap out a native control for your own Shadow DOM "widget".
我认为现在跨浏览器开发的最佳选择是使用基于 JavaScript 的界面实现漂亮的控件，然后禁用 HTML5 本机 UI 并替换它。我认为在未来，也许会有更好的原生控件样式，但也许更有可能的是将原生控件替换为您自己的 Shadow DOM“小部件”的能力。
It is annoying that this isn't available, and petitioning for standard support is always worthwhile. Though it does seem like jQuery UI's lead has tried and was unsuccessful.
令人讨厌的是，这不可用，并且请求标准支持总是值得的。虽然看起来 jQuery UI 的领导者已经尝试过但没有成功。
While this is all very discouraging, it's also worth considering the advantages of the HTML5 date picker, and also why custom styles are difficult and perhaps should be avoided. On some platforms, the datepicker looks extremely differentand I personally can't think of any generic way of styling the native datepicker.
虽然这一切都非常令人沮丧，但也值得考虑 HTML5 日期选择器的优势，以及为什么自定义样式很困难，也许应该避免。在某些平台上，日期选择器看起来非常不同，我个人想不出任何通用的方式来设置原生日期选择器的样式。
回答by Justin Moore
found this on Zurb's github
在Zurb 的 github上找到了这个
In case you want to do some more custom styling. Here's all the default CSS for webkit rendering of the date components.
如果您想做更多自定义样式。这是日期组件的 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;
}
回答by Jean-Marie Dalmasso
I used a combination of the above solutions and some trial and error to come to this solution. Took me an annoying amount of time so I hope this can help someone else in the future. I also noticed that the date picker input is not at all supported by Safari...
我结合了上述解决方案和一些反复试验来得出这个解决方案。花了我很烦人的时间，所以我希望这可以在将来帮助其他人。我还注意到 Safari 根本不支持日期选择器输入...
I am using styled-components to render a transparent date picker input as shown in the image below:
我正在使用样式组件来呈现透明的日期选择器输入，如下图所示：
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;}
`
回答by vignesh waran
You can use the following CSS to style the input element.
您可以使用以下 CSS 来设置 input 元素的样式。
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="" />