H5自带的日期等选择框默认样式略不漂亮,一般使用时候都需要自行自定义一下。
以type=“week”为例,原本样子
<input type="week" class="week-input" />
略加css样式
<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>
-
编辑框区域
:: -webkit-datetime-edit {} //例如: padding,color等样式
-
年月日区域
::-webkit-datetime-edit-fields-wrapper { /* 控制圈中的文字的样式 */ }
-
上下两个小箭头
::-webkit-inner-spin-button{/* 设置箭头样式,例如是否显示 */}
- 下拉箭头
::-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 {}