如何修改input type为date的样式

做一个有知识的流氓

如何修改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 有问题的话可以一同探讨
我的私人博客: 李大玄