input type=['date', 'week']输入框，默认样式修改

ゞ浴缸里的玫瑰 2022-03-14 11:52 383阅读 0赞

H5自带的日期等选择框默认样式略不漂亮，一般使用时候都需要自行自定义一下。

以type=“week”为例，原本样子

> `<input type="week" class="week-input" />`  
> ![在这里插入图片描述][20190304150750118.png]

略加css样式

![在这里插入图片描述][20190304151158218.png]

--------------------

*  编辑框区域  
    ![20190304145622679.png][]  
    `:: -webkit-datetime-edit {} //例如： padding，color等样式`
 *  年月日区域  
    ![20190304145858266.png][]  
    `::-webkit-datetime-edit-fields-wrapper { /* 控制圈中的文字的样式 */ }`
 *  上下两个小箭头

![20190304150228390.png][]  
`::-webkit-inner-spin-button{/* 设置箭头样式，例如是否显示 */}`

*  下拉箭头

![在这里插入图片描述][20190304150439282.png]  
`::-webkit-calendar-picker-indicator { /* 可以替换为其他图片 */ }`

> 对于type="date"的日期选择框，还有针对年， 月 ， 日 等的自定义样式  
> 例如：
> 
> ### **::webkit-datetime-edit-year-field \{\}** ###
> 
> ### **::webkit-datetime-edit-month-field \{\}** ###
> 
> ### **::webkit-datetime-edit-day-field \{\}** ###
> 
> ### **::webkit-datetime-edit-year-field:focus \{\}** ###

[20190304150750118.png]: /images/20220313/70a331297259418fbaba78c038050882.png
[20190304151158218.png]: /images/20220313/f8fbce36c81942dda74a3bf846ed2d20.png
[20190304145622679.png]: /images/20220313/10ed285434034575a5e21286668e7724.png
[20190304145858266.png]: /images/20220313/147ffa08751449c281b6b6969850194f.png
[20190304150228390.png]: /images/20220313/da948c3887ae4717a989092b043072b2.png
[20190304150439282.png]: /images/20220313/934c765b82b14c9ab979dc26bb47b2d4.png