手机端有日期插件的输入框写法
1、首先在html中写出一个container的小箱子包裹着通用代码
<div class="container"> <div class="form-group"> <label >起始日期</label> <input type="date" class="form-control" value="2016-05-15"> </div> </div>
2、定义一下小箱子的样式
.container{ width: 100%; margin: 0 auto; padding: 0 15px; }
3、接下来写form-group、label及其from-control样式,如下
.form-group { width: 100%; position: relative; padding-left: 80px; margin-top: 10px; color: #ffffff; } .form-group > label { position: absolute; left: 0; top: 0; line-height: 34px; color: #000; } .form-group .form-control { width: 100%; padding: 6px 12px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.16); border: 1px solid rgba(169, 169, 169, 0.16); }
4、注意事项: 小箱子的宽度是width:100%,不能写成width:1080px; label是通过父级form-group定位来确定自身位置; html中value的日期写法:2015-05-15,不能写成2015/05/15,后者页面不会正常显示。