手机端有日期插件的输入框写法

来源:互联网 发布:惩罚男朋友的招数知乎 编辑:程序博客网 时间:2024/04/29 00:31

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,后者页面不会正常显示。

0 0
原创粉丝点击