仅此一人，致此终年
如何修改input type为date的样式
先后先大家都知道，H5出来的这个input框好用，但就是样式太丑了，所以我觉得修改一下他的样式
::-webkit-datetime-edit { padding: 1px; background: url(../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;
}
这是他的样式，不过可以自己调整,自己进行调整，需要什么样式自己进行调整，不过有些样式事调整不了的......
/* 修改日历控件类型 */
.date {
display: inline-block;
width: 400px;
font-size: 20px;
}
::-webkit-datetime-edit {
padding: 10px;
}
/*控制编辑区域的*/
::-webkit-datetime-edit-fields-wrapper {
background-color: #fff;
}
/*控制年月日这个区域的*/
::-webkit-datetime-edit-text {
color: #b62d2d;
padding: 10px;
}
/*这是控制年月日之间的斜线或短横线的*/
::-webkit-datetime-edit-year-field {
color: #c30909;
}
/*控制年文字, 如2013四个字母占据的那片地方*/
::-webkit-datetime-edit-month-field {
color: #3ef326;
}
/*控制月份*/
::-webkit-datetime-edit-day-field {
color: #d6c319;
}
/*控制具体日子*/
::-webkit-inner-spin-button {
cursor: pointer;
display: none;
}
/*这是控制上下小箭头的*/
::-webkit-calendar-picker-indicator {
/*这是控制下拉小箭头的*/
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px #fff, 0 1px #eee;
/* background-color: rgb(165, 65, 65); */
background-image: -webkit-linear-gradient(top, #f5c9c9, #e6e6e6);
color: #666;
cursor: pointer;
}
::-webkit-clear-button {
/*控制清除按钮*/
cursor: pointer;
}
在最后附上我的QQ: 2489757828 可以一同探讨问题
我的私人博客: 李大玄
