当前位置: 首页 > 知识库问答 >
问题:

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

柳英资
2023-03-14

我真的对HTML5日期选择器感到兴奋。令人耳目一新的是,W3C终于弥补了一些不足,因此我们不必继续重新发明这样一种常见的输入形式。

这与另一个更大的问题(如果你知道答案的话)是成对的:是否值得我花时间尝试参与W3C或WHATWG,以便让其中一些事情见诸报端?任何形式的见解都是有帮助的。

共有1个答案

田信然
2023-03-14

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">
 类似资料:
  • 我已经在我的片段上实现了日期选择器,下面是代码: 我想使用material样式的DatePicker,我尝试使用这个库compile,但是结果是一样的。有什么帮助吗?我如何用材料日期选择器更改这个数据更新程序?谢谢

  • 本文向大家介绍CSS样式选择选项,包括了CSS样式选择选项的使用技巧和注意事项,需要的朋友参考一下 要为<select>中的选项设置样式,您可以尝试运行以下代码, 示例

  • > 总结一下问题:我试图了解如何以特定的方式自定义html5日期选择器,具体来说,格式类似于8月31日星期二的[日历图标],右侧带有插入符号,可以打开日期选择器。经过初步搜索,我找到了这些用于自定义日期输入文本框的伪元素。 预期的结果是,这些定制选项在大多数情况下都可以满足定制日期选择器的要求,但到目前为止,我还无法应用这些选项来完全满足目标。例如,我试图去掉文本框中的第二个正斜杠(31之后的代码

  • 我试图检查某些HTML5控件的影子DOM,例如输入类型的日期选择器和绑定到数据列表的输入的实际建议下拉列表。最好使用Chrome浏览器,但其他浏览器也可以。 我发现,通过在Chrome的inspector选项中启用阴影DOM设置,我可以检查阴影DOM的实际输入(其中包括显示日期选择器的webkit日历选择器指示器,而不是日期选择器本身): 数据列表也是如此。看起来这些控件不是输入的一部分,但我在“

  • 我已经记录了用于从日期选择器中选择日期的selenium代码。在运行测试用例时,日期选择器会弹出并正确突出显示所选日期。但是没有选择日期。代码如下所示:- 此异常仅出现在记录的代码中。我使用的是selenium-server-standalone-2 . 45 . 0 jar。

  • 我一直在尝试更改选择选项的样式。例如添加颜色和背景似乎可以使用下面的代码。但它不起作用,例如边距:20px,边框或任何东西。一直在尝试不同的东西和JS和JQueary,但我不能让它工作,所有的提示都是欢迎的!:) null null