时间h5的date的原生样式怎么更改

Posted 2023-05-02

html5的date的原生样式更改的方法是增加webkit属性。
比如：

input[type="date"]::-webkit-outer-spin-button
所有适用于date输入域的样式设置如下：
input[type="date"]
input[type="month"]
input[type="time"]
input[type="week"]
input[type="datetime"]
input[type="datetime-local"]
input::-webkit-datetime-edit
input::-webkit-datetime-edit-fields-wrapper
input::-webkit-datetime-edit-ampm-field
input::-webkit-datetime-edit-day-field
input::-webkit-datetime-edit-hour-field
input::-webkit-datetime-edit-millisecond-field
input::-webkit-datetime-edit-minute-field
input::-webkit-datetime-edit-month-field
input::-webkit-datetime-edit-second-field
input::-webkit-datetime-edit-week-field
input::-webkit-datetime-edit-year-field

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

input::-webkit-datetime-edit-year-field[disabled]
input::-webkit-datetime-edit-month-field[disabled]
input::-webkit-datetime-edit-week-field[disabled]
input::-webkit-datetime-edit-day-field[disabled]
input::-webkit-datetime-edit-ampm-field[disabled]
input::-webkit-datetime-edit-hour-field[disabled]
input::-webkit-datetime-edit-millisecond-field[disabled]
input::-webkit-datetime-edit-minute-field[disabled]
input::-webkit-datetime-edit-second-field[disabled]
input::-webkit-datetime-edit-text
input::-webkit-inner-spin-button
input::-webkit-calendar-picker-indicator
input::-webkit-calendar-picker-indicator:hover 参考技术A 在很多页面和web应用中都有输入日期和时间的地方，最典型的是订飞机票，火车票，酒店，批萨等网站。
在HTML5之前，对于这样的页面需求，最常见的方案是用javascript日期选择组件。这几乎是无可争议、别无选择的做法。你可以在搜寻一下“javascript 日期选择框”，会发现有无数的可选择的JavaScript组件。大部分这些日期选择组件都提供将日期填充到指定的输入框里的功能。
HTML5里的dateinput类型给了给了浏览器实现原生日历的机会，从此之后，JavaScript版的日历组件将退出历史舞台。
HTML5规范里只规定date新型input输入类型，并没有规定日历弹出框的实现和样式。所以，各浏览器根据自己的设计实现日历。
目前只有谷歌浏览器完全实现日历功能。相信这种局面很快就会结束，所有的浏览器最终都将会提供原生的日历组件。
如果你使用的是谷歌浏览器，那你就可以在下面的实例演示中看到这个漂亮的日期组件。用鼠标点击输入框，就能看到浏览器原生的日历框。追问

那像手机QQ浏览器的时间样式怎么写 要手机版的

date命令，更改输出格式

要求：date 命令输出格式为，2014-05-06 12:22:21
date “+%Y-%m-%d %H:%M:%S”
命令格式：date [选项] [+格式]
注：格式中包含空格的话要用”“括住
%Y //年份
%m //月份（1-12）
%d //月内的日期（如：07）
%H //小时（0-23）
%M //分（0-59）
%S //秒（0-60）