所有input通用样式
input{ display: block; outline: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom: 30px; }
1、input[type='button/submit/reset']
.input-wrapinput[type="button"], .input-wrapinput[type="submit"], .input-wrapinput[type="reset"]{ width: 200px; height: 40px; font-size: 16px; color:#ffffff; background:#4359aa; border: none; } .input-wrapinput[type="button"]:hover, .input-wrapinput[type="submit"]:hover, .input-wrapinput[type="reset"]:hover{ opacity: 0.7; filter:alpha(opacity=70); } .input-wrapinput[type="button"]:active, .input-wrapinput[type="submit"]:active, .input-wrapinput[type="reset"]:active{ background:#041a6b; }
<divclass="input-wrap"> <!-- disabled:设置返回是否禁⽤按钮; form :返回包含按钮的表单对象的引⽤ name:设置或返回按钮的名称 type:设置表单元素的类型 value:设置或返回按钮上显⽰的⽂本 --> <inputtype="button"value="button" /> <inputtype="reset" /> <inputtype="submit" /> </div>
效果
2、input[type='text/password/email/tel/url']
.input-wrap02input{ width: 300px; height: 20px; background:#ffffff; font-size: 14px; color:#222222; line-height: normal; border: 1px solid #e8e8e8; padding: 6px 15px; } .input-wrap02input::-moz-placeholder{ font-size: 14px; color:#D0D0D0; } .input-wrap02input::-ms-input-placeholder{ font-size: 14px; color:#D0D0D0; } .input-wrap02input::-webkit-input-placeholder{ font-size: 14px; color:#D0D0D0; }
<divclass="input-wrap input-wrap02"> <!-- 在移动端点击输⼊框时: 当为text时,点击输⼊框弹出的默认键盘为中⽂ 当为password时,点击输⼊框弹出的默认键盘为英⽂ 当为email时,点击输⼊框弹出的默认键盘为中⽂ 当为tel时,点击输⼊框弹出的默认键盘为数字键盘 当为URL时,点击输⼊框弹出的默认键盘为中⽂ --> <!-- autocompelete:设置或返回的autocompelete属性值(text/email/url) autofocus:在页⾯加载设置或返回⽂本域是否⾃动获取焦点(text/email/url) defaultValue:设置或返回⽂本域的默认值 disabled:设置或返回⽂本域是否禁⽤ form:返回⼀个包含闻⼥恩宇的表单对象的引⽤(text/email/url) list:返回⼀个包含⽂本域的选项列表对象的引⽤(text/email/url) maxLength:设置或返回最⼤字符数 name:设置或返回名称 pattern:设置或返回⽂本域的pattern属性值(text/email/url) palceholder:设置或返回⽂本域的palaceholder属性值 readOnly:设置或返回是否应该是只读的 required:设置或返回字段在表单中是否为必填字段(text/email/url) size:设置或返回⽂本域或密码字段的长度(text/password/url) type:返回表单元素类型 value:设置或返回value属性值 multiple:是指或返回email字段是否可以输⼊多个邮箱地址(email/url) step:设置或返回email字段的step属性值(email/url) --> <inputtype="text"placeholder="text" /> <inputtype="password"placeholder="password" /> <inputtype="email"placeholder="email" /> <inputtype="tel"placeholder="tel" /> <inputtype="url"placeholder="url" /> </div>
效果
3、input[type='radio/checkbox']
.way-1{ padding: 10px 0;} .way-1input{ display: none;} .way-1label{ position: relative; display: block; width: 20px; height: 20px; border: 1px solid #dddddd;} .way-1input[type=checkbox] + label, .way-1input[type=checkbox]:checked + label:before{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} .way-1input[type=checkbox]:checked + label, .way-1input[type=radio]:checked + label{border: 1px solid #4359aa;} .way-1input[type=checkbox]:checked + label:before, .way-1input[type=radio]:checked + label:before{position: absolute; top: 50%; left: 50%; content: ''; width: 10px; height: 10px; background:#4359aa; margin-top: -5px; margin-left: -5px; }
.way-1input[type=radio] + label,
.way-1input[type=radio]:checked + label:before{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
<divclass="input-wrap"> <!-- disabled:设置或返回checkbox是否被禁⽤ checked:是指或返回checkbox是否应被选中 defaultChecked:返回checked属性的默认值 form:返回对包含checkbox的表单的引⽤ name:设置或返回checkbox的名称 type:返回checkbox的表单元素的类型 value:设置或返回checkbox的value属性的值 --> <divclass="way-1"> <inputid="radio"type="radio" /> <labelfor="radio"></label> </div> <divclass="way-1"> <inputid="checkbox"type="checkbox" /> <labelfor="checkbox"></label> </div> </div>
4、input[type='file']
.file-wrap{ position: relative; cursor: default; } .file-wrap, .file-wrapinput{ width: 100px; height: 35px; font-size: 16px; color:#222222; line-height: 33px; text-align: center; border: 1px solid #e8e8e8; background:#ffffff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .file-wrapinput{ position: absolute; top: 0; left: 0; opacity: 0; margin: 0; }
<divclass="input-wrap"> <!-- disabled:设置或返回是否禁⽤FileUpload对象 accept:设置或返回只是⽂件传输的mime类型列表(逗号分隔) form:返回对包含FileUpload对象的表单的引⽤ name:设置或返回FileUpload对象的名称 type:返回表单元素的类型。对于FileUpload,则是file value:返回由⽤户输⼊设置的⽂本后,FileUpload对象的⽂件名 --> <divclass="file-wrap"> 选择⽂件<inputtype="file" /> </div> </div>
效果
5、input[type='image']
.input-wrapinput[type="image"]{ width: 200px; height: 40px; font-size: 16px; color:#222222; text-align: center; line-height: 40px; border: 1px solid #e8e8e8; background:#ffffff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
<divclass="input-wrap"> <!-- ***定义图像形式的提交按钮 <input type="image" src="xxx.gif" onclick="return dosubmit();"> 这样经常会造成两次提交的现象,数据库写⼊异常,不建议使⽤ 因为<input type="image" />本⾝就是⼀个提交按钮,和submit⼀样,加上onclick就提交两次了 --> <!-- align: 设置或返回与内联内容的对齐⽅式 alt:设置或返回⽆法显⽰图像时的替代⽂本 border:设置或返回图像周围的边框 complete:返回浏览器是否已完成图像的加载 height:设置或返回图像的⾼度 hspace:设置或返回图像左侧和右侧的空⽩ longDesc:设置或返回指向包含图像描述的⽂档的URL lowsrc:设置或返回图像的低分辨率版本的URL name:设置或返回图像的名称 src: 设置或返回图像的URL useMap: 设置或返回客户端映射的usemap属性的值 yspace:设置或返回图像的顶部或者底部的空⽩ width:设置或返回图像的宽度 --> <inputtype="image"src="loading.jpg"alt="加载中" /> </div>
效果
6、input[type='search']
.input-wrapinput[type="search"]{ width: 300px; height: 40px; font-size: 14px; color:#ffffff; border: none; padding: 10px 0 10px 20px ; background:#4359aa; } .input-wrapinput[type="search"]::-webkit-input-placeholder{ font-size: 14px; color:rgba(255,255,255,0.6); } .input-wrapinput[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none;/*去掉默认样式*/ width: 40px; height: 40px; background:url(icon-cancel.png) no-repeat center; background-size: 18px 18px; }
<divclass="input-wrap"> <!-- 在移动端点击输⼊框时弹出的默认键盘为中⽂ --> <!-- 属性有: autocomplete / autofocus / defaultValue / disabled / form / list / maxLength / name / pattern / palceholder / readOnly / required / size / --> <formaction="#"> <inputtype="search"placeholder="搜索" /> </form> </div>
效果
7、input[type='number']
/*number*/ .input-wrapinput[type="number"]{ width: 300px; height: 20px; border: 1px solid #e8e8e8; font-size: 14px; color:#222222; padding: 10px; -moz-appearance: textfield;/*firefox上去掉箭头*/ } /*去掉默认的箭头*/ .input-wrapinput[type="number"]::-webkit-outer-spin-button, .input-wrapinput[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; }
<divclass="input-wrap"> <!-- 在移动端点击输⼊框时弹出的默认键盘为数字键盘 与type="tel"的区别是,tel没有箭头,number有箭头 --> <!-- 属性: autocomplete / autofocus / defaultValue / disabled / form / list / name / placeholder / readOnly / required / step / type / value labels:返回number字段的标签元素列表 max:设置或返回number字段的max属性值 min:设置或返回number字段的min属性值 step:可以设置number的精确度,默认为整数,例如:两位⼩数step="0.01" --> <inputtype="number"step="0.01" /> </div>
8、input[type='color']
.input-wrapinput[type="color"]{ position: relative; width: 50px; height: 50px; } .input-wrapinput[type="color"]::-webkit-color-swatch-wrapper{ border: 1px solid #777777; background:-webkit-gradient(linear,00,100% 0,from(red), color-stop(15%,orange), color-stop(30%,yellow), color-stop(50%,green), color-stop(65%,darkcyan), color-stop(80%,blue), to(purple));/*old webkit*/ background:-webkit-linear-gradient(left,red,orange,yellow,green,darkcyan,blue,purple);/*new webkit*/ background:-moz-linear-gradient(left,red,orange,yellow,green,darkcyan,blue,purple);/*mozilla*/ background:-o-linear-gradient(left,red,orange,yellow,green,darkcyan,blue,purple);/*opera11.0*/ } .input-wrapinput[type="color"]::-webkit-color-swatch{ position:relative; left: 50px; top:-6px; height:50px; }
<divclass="input-wrap"> <!-- ***h5新增 autocomplete:设置或者返回拾⾊器的autocomplete属性 autofocus:设置或返回在页⾯加载时拾⾊器是否获取焦点 defaultValue:设置或返回拾⾊器默认的值 disabled:设置或返回拾⾊器是否可⽤ form:返回包含拾⾊器的form表单引⽤ list:返回包含拾⾊器的datalist引⽤ name:设置或者返回拾⾊器name属性值 type:返回拾⾊器的表单元素类型 value:设置或者返回拾⾊器的value属性值 --> <inputtype="color"value="#4359aa" /> </div>
效果
9、input[type='range']
.input-wrapinput[type="range"]{ -webkit-appearance: none; width: 300px; height: 12px; border-radius: 15px; background: red; background:-webkit-linear-gradient(left,blue,orange); } .input-wrapinput[type="range"]::-webkit-slider-runnable-track{ height: 30px; } .input-wrapinput[type="range"]::-webkit-slider-thumb{ -webkit-appearance: none; height: 30px; width: 30px; background:#ffffff; border-radius: 100%; box-shadow: 0 0 10px 1px rgba(0,0,0,0.5); }
<divclass="input-wrap"> <!-- 属性: form / disabled / list / autocomplete / name / type max:设置或返回滑块控件的最⼤值 min:设置或返回滑块空间的最⼩值 step:设置或返回每次拖动滑块控件时的递增量 value:设置或返回滑块控件的value属性值 defaultValue:设置或返回滑块控件的默认值 autofocus:设置或返回滑块控件在页⾯加载后是否应⾃动获取焦点 --> <inputtype="range" /> </div>
效果
10、input[type='hidden']
<input type="hidden" />
效果
隐藏域在页面中是不可见的,在表单插入隐藏域的目的是在于收集和发送信息,以利于被处理表单的程序所使用。
11、input[type='date/datetime/datetime-local/month/time/week']
.input-time input{ width:200px; height:30px; border:1px solid #dddddd; } .input-wrap input[type="date"]::-webkit-outer-spin-button, .input-wrap input[type="date"]::-webkit-inner-spin-button{ -webkit-appearance: none; }
<divclass="input-wrap input-time"> <p>type="date/datetime/datetime-local/month/time/week"</p> <!-- 在移动端使⽤: date:年-⽉-⽇ datetime:年-⽉-⽇时:分 datetime-local:年-⽉-⽇时:分 month:年-⽉ time:时:分 week:年-W21 --> <inputtype="date" /> <inputtype="datetime" /> <inputtype="datetime-local" /> <inputtype="month" /> <inputtype="time" /> <inputtype="week" /> </div>
效果
参看文章https://wenku.baidu.com/view/86ccead29d3143323968011ca300a6c30c22f1b3.html