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=""/>

?

轉(zhuǎn)載于:https://www.cnblogs.com/myclovers/p/6198292.html

總結(jié)

以上是生活随笔為你收集整理的伪元素改变date类型input框的默认样式实例页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。