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

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{}

H5edu教育Html5为您解答：

CSS代码：

input[type="date"]{width:150px}

input[type="week"]{width:150px}

input[type="month"]{width:150px}

input[type="year"]{width:150px}

HTML代码：

选择日期：<input type="date" value="2011-01-04" />

选择时间：<input type="time" value="22:52" />

选择星期：<input type="week" />

选择月份：<input type="month" />

<form name=form>

<input type="hidden" type=text name=DaysToAdd size=4 value=0 onFocus="this.select()" onMouseOver="this.focus()">

<input type=text name="display" size=20 value="">

<input type=button value="提取当前时间" onClick="AddDays(this.form)" name="button"><script language="JavaScript">

<!--

function CurentTime()

{

var now = new Date()

var year = now.getFullYear() //年

var month = now.getMonth() + 1//月

var day = now.getDate() //日

var hh = now.getHours() //时

var mm = now.getMinutes() //分

var ss = now.getSeconds() //秒

var clock = year + "-"

if(month <10)

clock += "0"

clock += month + "-"

if(day <10)

clock += "0"

clock += day + " "

if(hh <10)

clock += "0"

clock += hh + ":"

if (mm <10) clock += '0'

clock += mm + ":"

if (ss <10) clock += '0'

clock += ss

return(clock)

}

function AddDays(form) {

document.form.display.value=CurentTime()}

-->

</script>

---