原生的 input[type="date"]修改預設的樣式
最近寫一個頁面,用到了date型別的input,不得不說,挺好用的,免去了額外引入第三方外掛的麻煩,但與此同時,也出現了新的麻煩,那就是input[type=”date”]自帶的一些樣式,
可以看到後面會多出一個刪除的ICON和彈出日曆框的向下箭頭,那麼要怎麼移除嘞?上程式碼!
/*----------用來移除向下箭頭----------*/ input[type="date"]::-webkit-calendar-picker-indicator { display: none; } /*----------用來移除上下箭頭----------*/ input[type="date"]::-webkit-inner-spin-button { display: none; } /*----------用來移除叉叉按鈕----------*/ input[type="date"]::-webkit-clear-button{ display:none; }
ok,這樣一來,讓人頭疼的預設樣式就被幹掉了~完美~
下面,我們詳細講解:
1.時間選擇的種類:
HTML程式碼:
選擇日期:<input type="date" value="2017-06-01" />
選擇時間:<input type="time" value="22:52" />
選擇星期:<input type="week" />
選擇月份:<input type="month" />
2.對日期時間控制元件的樣式進行修改
目前WebKit下有如下9個偽元素可以改變日期控制元件的UI:
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
– 控制年月日這個區域的::-webkit-datetime-edit-text
– 這是控制年月日之間的斜線或短橫線的::-webkit-datetime-edit-month-field
– 控制月份::-webkit-datetime-edit-day-field
– 控制具體日子::-webkit-datetime-edit-year-field
– 控制年文字, 如2017四個字母佔據的那片地方::-webkit-inner-spin-button
– 這是控制上下小箭頭的::-webkit-calendar-picker-indicator
– 這是控制下拉小箭頭的::-webkit-clear-button
–這是控制清除按鈕的
以下的囊括了date,datetime,week,time所用的偽元素:
input::-webkit-datetime-edit{}
input::-webkit-datetime-edit-fields-wrapper{}
input::-webkit-datetime-edit-ampm-field{}
input::-webkit-datetime-edit-day-field{}
input::-webkit-datetime-edit-hour-field{}
input::-webkit-datetime-edit-millisecond-field{}
input::-webkit-datetime-edit-minute-field{}
input::-webkit-datetime-edit-month-field{}
input::-webkit-datetime-edit-second-field{}
input::-webkit-datetime-edit-week-field{}
input::-webkit-datetime-edit-year-field{}
input::-webkit-datetime-edit-ampm-field:focus{}
input::-webkit-datetime-edit-day-field:focus{}
input::-webkit-datetime-edit-hour-field:focus{}
input::-webkit-datetime-edit-millisecond-field:focus{}
input::-webkit-datetime-edit-minute-field:focus{}
input::-webkit-datetime-edit-month-field:focus{}
input::-webkit-datetime-edit-second-field:focus{}
input::-webkit-datetime-edit-week-field:focus{}
input::-webkit-datetime-edit-year-field:focus{}
input::-webkit-datetime-edit-year-field[disabled]{}
input::-webkit-datetime-edit-month-field[disabled]{}
input::-webkit-datetime-edit-week-field[disabled]{}
input::-webkit-datetime-edit-day-field[disabled]{}
input::-webkit-datetime-edit-ampm-field[disabled]{}
input::-webkit-datetime-edit-hour-field[disabled]{}
input::-webkit-datetime-edit-millisecond-field[disabled]{}
input::-webkit-datetime-edit-minute-field[disabled]{}
input::-webkit-datetime-edit-second-field[disabled]{}
input::-webkit-datetime-edit-text{}
input::-webkit-inner-spin-button{}
input::-webkit-calendar-picker-indicator{}
input::-webkit-calendar-picker-indicator:hover{}
date型別改變行高和高度那個小三角並不會根據大小調整,實在太醜了,所以決定把它隱藏掉。
下面的css可以去掉date中上下小三角,但是保留input型別為number的小三角。
input[type=date]::-webkit-inner-spin-button { visibility: hidden; }
input型別為date的輸入框有以下屬性,可以根據自己的需求自行調整。
::-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;
}