input type = [ 'date', 'week'] input box, to modify the default style

H5 date selection box comes with default style slightly unattractive, usually when they are required to use their own custom look.

With type = "week" for example, look like the original

<input type="week" class="week-input" />

Slightly css styles

<style>
.week-input {
	border: 1px solid #dcdee2;
 	 border-radius: 4px;
  	user-select: none;
  	box-sizing: border-box;
  	transition: all 0.2s ease-in-out;
 	 width: 195px;
 	 height: 32px;
 	 line-height: 32px;
 }
</style>

---

• Edit box area
  
  :: -webkit-datetime-edit {} //例如： padding，color等样式

• Date area
  
  ::-webkit-datetime-edit-fields-wrapper { /* 控制圈中的文字的样式 */ }

• Up and down two small arrows

::-webkit-inner-spin-button{/* 设置箭头样式，例如是否显示 */}

• Down arrow

::-webkit-calendar-picker-indicator { /* 可以替换为其他图片 */ }

For date type = "date" selection box, as well as a custom style for the year, month, day, etc.
For example:

::webkit-datetime-edit-year-field {}

::webkit-datetime-edit-month-field {}

::webkit-datetime-edit-day-field {}

::webkit-datetime-edit-year-field:focus {}