伪元素改变date类型input框的默认样式实例页面

CSS代码：

::-webkit-datetime-edit { padding: 1px; background: url(/study/image/selection.gif); }
::-webkit-datetime-edit-fields-wrapper { background-color: #eee; }
::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-inner-spin-button { visibility: hidden; }
::-webkit-calendar-picker-indicator {
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: inset 0 1px #fff, 0 1px #eee;
    background-color: #eee;
    background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
    color: #666;
}

html代码：

<p>date</p>
<input id="date" type="date" value=""/>
<!--datetime-->
<p>datetime</p>
<input id="datetime" type="datetime" value=""/>
<!--datetime-local-->
<p>datetime-local</p>
<input id="datetime-local" type="datetime-local" value=""/>
<!--month-->
<p>month</p>
<input id="month" type="month" value=""/>
<!--week-->
<p>week</p>
<input id="week" type="week" value=""/>
<!--time-->
<p>time</p>
<input id="time" src="" type="time" value=""/>

 

转载于:https://www.cnblogs.com/myclovers/p/6198292.html