CSSHTML5简洁带图标的input⽇期选择器CSS/HTML 5简洁带图标的input⽇期选择器
说明
演⽰效果分辨率为1980x1080分辨率效果
⾼度可定制修改
纯css代码控制
使⽤的input type=“date/week/month” html标签 ⾮⾃定义js⽇期组件
css代码html5颜代码
#date{
width: 1100px;
height: 50px;
border: 0px solid #FFF;
float: left;
margin-left: 118px;
margin-top: 46px;
}
#startTime{
float: left;
margin-left: 0px;
background: #FFFFFF;
}
#endTime{
float: left;
margin-left: 30px;
background: #FFFFFF;
}
#TimeRight{
float: right;
background: #FFFFFF;
width: 20px;
height: 50px;
}
input[type="month"]{
width: 158px;
height: 50px;
border: none;
line-height: 1;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
padding-left: 14px;
font-size: 1rem;
color: #525C66;
outline: none;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
padding-right:-00px;
background:url("../../assets/img/出⽣年⽉.png") no-repeat scroll right center transparent;
}
}
input[type="month"]::-webkit-inner-spin-button{
visibility: hidden;
}
input[type="month"]{
outline: none;
/* background: url(../assets/img/出⽣年⽉.png) no-repeat right; */
}
input[type="month"]:after{}
input[type="month"]::-webkit-calendar-picker-indicator{
/*这是控制下拉⼩箭头的*/
border: 0px solid #ccc;
border-radius: 0px;
/*  box-shadow: inset 0 1px #fff, 0 1px #eee; */
color: #FFF;
/* width: 0px;
height: 0px; */
}
.Time{
width: 80px;
height: 50px;
background: #FFFFFF;
float: left;
}
#TimeFont{
font-size: 14px;
color: #8F9DB3;
float: left;
margin-left: 20px;
margin-top: 15px;
}
html代码
<div id="date">
<div id="startTime">
<div class="Time"for=""><span id="TimeFont">开始时间</span></div>
<input type="month"v-model="startTime" >
<div id="TimeRight"></div>
</div>
<div id="endTime">
<div class="Time"for=""><span id="TimeFont">结束时间</span></div>
<input type="month"v-model="endTime">
<div id="TimeRight"></div>
</div>
</div>
演⽰效果图
演⽰效果图上的图标、图⽚类，我已经上传到博客⽂件⾥。
不能设置免费下载，⼤家可以加我QQ来获取⽂件 1209793794

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。