HTML5日期选择器有任何样式选项吗？
Wra*_*ing 94 html5 w3c datepicker
我对HTML5日期选择器非常感兴趣.令人耳目一新的是,W3C终于找到了一些懈怠,所以我们不必继续重新发明这种常见的输入形式.
需要注意的是,我没有看到或预见到将颜色应用于拾取器本身的方式,这将使得在大多数站点上使用日期选择器类型的交易破坏者.<select>由于人们无法使其变得漂亮的简单原因而遭受广泛的javascript替换黑客攻击.如果有人知道W3C土地上发生了什么,我很好奇吗？
这有点与另一个更大的问题(如果你知道答案)配对:我是否值得花时间尝试参与W3C或WHATWG,以便其中一些事情能够看到光明的一天？任何形式的见解都是有帮助的.
Ans*_*elm 206
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">
- 为`和一个荒谬的配色方案+1 (151认同)
- 哇!现在这很有趣! (6认同)
- 这些伪类的来源将使这成为一个更好的答案...... (4认同)
- http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/ (3认同)
- 使用输入[type ="date"]为我的目的工作,也许这也适用于其他人. (2认同)
- 注意，您也可以使用伪类`::-webkit-clear-button`设置清除按钮的样式。 (2认同)
Cam*_*ron 19
目前,没有跨浏览器,无脚本的方式来设置本机日期选择器的样式.
至于WHATWG/W3C内部发生了什么...如果这个功能确实出现,它可能会在CSS-UI标准或一些与Shadow DOM相关的标准之下.该CSS4-UI wiki页面列出了从CSS3 UI的下降,但说实话,似乎没有要的CSS-UI模块中的极大兴趣几样有关的东西.
我认为现在跨浏览器开发最好的选择是使用基于JavaScript的界面实现漂亮的控件,然后禁用HTML5本机UI并替换它.我认为将来可能会有更好的原生控件样式,但也许更有可能是为你自己的Shadow DOM"widget"换出原生控件的能力.
令人讨厌的是,这是不可用的,并且请求标准支持总是值得的.虽然看起来jQuery UI的领导似乎已经尝试过并且没有成功.
虽然这一点非常令人沮丧,但也值得考虑HTML5日期选择器的优点,以及为什么自定义样式很难并且应该避免.在某些平台上,datepicker 看起来非常不同,我个人无法想到任何通用的样式化原生日期选择器的方式.
- 我们今天有吗？ (2认同)
Jus*_*ore 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;
}
仅供参考，我需要更新的日历图标的颜色，这似乎并不可能具有相似特性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 甚至直接说这是不可能的。
我结合了上述解决方案和一些反复试验来得出这个解决方案。花了我很烦人的时间，所以我希望这可以在将来帮助其他人。我还注意到 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;}
`
| 归档时间： |
|
| 查看次数： |
125572 次 |
| 最近记录： |