修改日历控件的默认样式

默认效果:

修改后的效果:

源代码:

 1 ::-webkit-datetime-edit { padding: 0; background-color: #fff;}  /*控制编辑区域*/
 2 ::-webkit-datetime-edit-fields-wrapper { background-color: #fff; }    /*控制年月日这个区域*/
 3 ::-webkit-datetime-edit-text { color: #000; background-color: #fff;}  /*控制年月日之间的斜线或短横线的*/
 4 ::-webkit-datetime-edit-year-field { color: #000; background-color: #fff;}    /*控制年文字, 如2013四个字母占据的那片地方*/   
 5 ::-webkit-datetime-edit-month-field { color: #000; background-color: #fff;}    /*控制月份*/
 6 ::-webkit-datetime-edit-day-field { color: #000; background-color: #fff;}    /*控制具体日子*/
 7 ::-webkit-inner-spin-button { visibility: hidden; }    /*控制上下小箭头的*/
 8 ::-webkit-clear-button { visibility: hidden; }    /*控制清除按钮*/
 9 ::-webkit-calendar-picker-indicator {      /*控制下拉小箭头*/
10     border: 1px solid red; 
11     border-radius: 2px; 
12     background-image: -webkit-linear-gradient(top, #fff, #fff); 
13     color: red; 
14 }
View Code
原文地址:https://www.cnblogs.com/wangchufang/p/8288393.html