input type date 預設樣式修改

2021-07-28 07:41:48 字數 794 閱讀 2284

最近寫乙個頁面,用到了date型別的input,不得不說,挺好用的,免去了額外引入第三方外掛程式的麻煩,但與此同時,也出現了新的麻煩,那就是input[type=」date」]自帶的一些樣式,比如刪除icon,上下箭頭等等,著實讓人頭疼,下面我介紹下幾種去除此類樣式的方法。

"date"

value="1993-08-01"

max="2017-03-11"

min="1900-01-01">

這是常見的date型別input的寫法,寫完後的展示效果如下:

可以看到後面會多出乙個刪除的icon和彈出日曆框的向下箭頭,那麼要怎麼移除嘞?上**!

/*----------用來移除向下箭頭----------*/

input

[type="date"]

::-webkit-calendar-picker-indicator

/*----------用來移除叉叉按鈕----------*/

input

[type="date"]

::-webkit-clear-button

ok,這樣一來,讓人頭疼的預設樣式就被乾掉了~完美~

當然,input[type=」date」]只是其中一種,還有類似time型別的input也有這樣的基帶樣式,有時在專案中也是需要被改寫或者去掉的,具體方法請移步:

最後,再推薦張鑫旭大神的乙個demo,在此文章中,我受益良多,也推薦給各位:

傳送門:

希望對各位小夥伴有所幫助~

input type date 的相容性等問題

html5 input date 移動端 ios 不支援問題 不支援顯示是 預設的樣式是年 月 日然後是有上下小三角的箭頭。桌面端 mac safari 不支援 datepicker,placeholder 正常顯示。firefox 不支援 datepicker,placeholder 正常顯示。c...

預設閘道器與預設路由

顧名思義,閘道器 gateway 就是乙個網路連線到另乙個網路的 關口 按照不同的分類標準,閘道器也有很多種。tcp ip協議裡的閘道器是最常用的,在這裡我們 所講的 閘道器 均指tcp ip協議下的閘道器。那麼閘道器到底是什麼呢?閘道器實質上是乙個網路通向其他網路的ip位址。比如有網路a和網路b,...

MySQL 預設引擎 預設編碼

mysql預設的儲存引擎是什麼?它們的區別有哪些?mysql中索引有哪些?1 mysql預設引擎 mysql 5.1版本之前預設引擎是myisam,之後是innodb 2 關係 myisam是非集聚引擎,支援全文索引 不支援事務 它是表級鎖 會儲存表的具體行數.innodb是集聚引擎,5.6以後才有...