所有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-wrap input[type="button"], .input-wrap input[type="submit"], .input-wrap input[type="reset"]{ width: 200px;height: 40px; font-size: 16px;color:#ffffff; background:#4359aa;border: none;} .input-wrap input[type="button"]:hover, .input-wrap input[type="submit"]:hover, .input-wrap input[type="reset"]:hover{opacity: 0.7;filter:alpha(opacity=70);} .input-wrap input[type="button"]:active, .input-wrap input[type="submit"]:active, .input-wrap input[type="reset"]:active{ background:#041a6b;}
<div class="input-wrap"> <!-- disabled:设置返回是否禁⽤按钮； form :返回包含按钮的表单对象的引⽤ name:设置或返回按钮的名称 type：设置表单元素的类型 value:设置或返回按钮上显⽰的⽂本 --> <input type="button" value="button" /> <input type="reset" /> <input type="submit" /> </div>
效果
2、input[type='text/password/email/tel/url']
.input-wrap02 input{ width: 300px;height: 20px;background:#ffffff;font-size: 14px; color:#222222; line-height: normal; border: 1px solid #e8e8e8; padding: 6px 15px;} .input-wrap02 input::-moz-placeholder{font-size: 14px;color:#D0D0D0;} .input-wrap02 input::-ms-input-placeholder{ font-size: 14px;color:#D0D0D0;} .input-wrap02 input::-webkit-input-placeholder{ font-size: 14px; color:#D0D0D0;}
<div class="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） --> <input type="text" placeholder="text" /> <input type="password" placeholder="password" /> <input type="email" placeholder="email" /> <input type="tel" placeholder="tel" /> <input type="url" placeholder="url" /> </div>
效果
3、input[type='radio/checkbox']
.way-1{ padding: 10px 0;} .way-1 input{ display: none;} .way-1 label{ position: relative; display: block; width: 20px; height: 20px; border: 1px solid #dddddd;} .way-1 input[type=checkbox] + label, .way-1 input[type=checkbox]:checked + label:before{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} .way-1 input[type=checkbox]:checked + label, .way-1 input[type=radio]:checked + label{border: 1px solid #4359aa;} .way-1 input[type=checkbox]:checked + label:before, .way-1 input[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-1 input[type=radio] + label,
.way-1 input[type=radio]:checked + label:before{-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;}
<div class="input-wrap"> <!-- disabled:设置或返回checkbox是否被禁⽤ checked：是指或返回checkbox是否应被选中 defaultChecked：返回checked属性的默认值 form：返回对包含checkbox的表单的引⽤ name:设置或返回checkbox的名称 type：返回checkbox的表单元素的类型 value：设置或返回checkbox的value属性的值 --> <div class="way-1"> <input id="radio" type="radio" /> <label for="radio"></label> </div> <div class="way-1"> <input id="checkbox" type="checkbox" /> <label for="checkbox"></label> </div> </div>
4、input[type='file']
.file-wrap{ position: relative; cursor: default;} .file-wrap, .file-wrap input{ 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-wrap input{ position: absolute; top: 0; left: 0; opacity: 0; margin: 0;}
<div class="input-wrap"> <!-- disabled:设置或返回是否禁⽤FileUpload对象 accept：设置或返回只是⽂件传输的mime类型列表（逗号分隔） form：返回对包含FileUpload对象的表单的引⽤ name:设置或返回FileUpload对象的名称 type：返回表单元素的类型。对于FileUpload，则是file value：返回由⽤户输⼊设置的⽂本后，FileUpload对象的⽂件名 --> <div class="file-wrap"> 选择⽂件<input type="file" /> </div> </div>
效果
5、input[type='image']
.input-wrap input[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;}
<div class="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：设置或返回图像的宽度 --> <input type="image" src="loading.jpg" alt="加载中" /> </div>
效果
6、input[type='search']
.input-wrap input[type="search"]{ width: 300px; height: 40px;font-size: 14px;color:#ffffff;border: none;padding: 10px 0 10px 20px ; background:#4359aa;} .input-wrap input[type="search"]::-webkit-input-placeholder{font-size: 14px; color:rgba(255,255,255,0.6);} .input-wrap input[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;}
<div class="input-wrap"> <!-- 在移动端点击输⼊框时弹出的默认键盘为中⽂ --> <!-- 属性有： autocomplete / autofocus / defaultValue / disabled / form / list / maxLength / name / pattern / palceholder / readOnly / required / size / --> <form action="#"> <input type="search" placeholder="搜索" /> </form> </div>
效果
7、input[type='number']
/*number*/ .input-wrap input[type="number"]{ width: 300px; height: 20px; border: 1px solid #e8e8e8; font-size: 14px; color:#222222; padding: 10px; -moz-appearance: textfield;/*firefox上去掉箭头*/} /*去掉默认的箭头*/ .input-wrap input[type="number"]::-webkit-outer-spin-button, .input-wrap input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none;}
<div class="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" --> <input type="number" step="0.01" /> </div>
8、input[type='color']
.input-wrap input[type="color"]{ position: relative;width: 50px;height: 50px;} .input-wrap input[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-wrap input[type="color"]::-webkit-color-swatch{ position:relative; left: 50px; top:-6px; height:50px; }
<div class="input-wrap"> <!-- ***h5新增 autocomplete:设置或者返回拾⾊器的autocomplete属性 autofocus:设置或返回在页⾯加载时拾⾊器是否获取焦点 defaultValue:设置或返回拾⾊器默认的值 disabled:设置或返回拾⾊器是否可⽤ form：返回包含拾⾊器的form表单引⽤ list:返回包含拾⾊器的datalist引⽤ name：设置或者返回拾⾊器name属性值 type:返回拾⾊器的表单元素类型 value：设置或者返回拾⾊器的value属性值 --> <input type="color" value="#4359aa" /> </div>
效果
9、input[type='range']
.input-wrap input[type="range"]{-webkit-appearance: none; width: 300px; height: 12px; border-radius: 15px; background: red; background:-webkit-linear-gradient(left,blue,orange);} .input-wrap input[type="range"]::-webkit-slider-runnable-track{ height: 30px;} .input-wrap input[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);}
<div class="input-wrap"> <!-- 属性： form / disabled / list / autocomplete / name / type max：设置或返回滑块控件的最⼤值 min：设置或返回滑块空间的最⼩值 step：设置或返回每次拖动滑块控件时的递增量 value：设置或返回滑块控件的value属性值 defaultValue：设置或返回滑块控件的默认值 autofocus：设置或返回滑块控件在页⾯加载后是否应⾃动获取焦点 --> <input type="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;}
<div class="input-wrap input-time"> <p>type="date/datetime/datetime-local/month/time/week"</p> <!-- 在移动端使⽤： date:年-⽉-⽇ datetime:年-⽉-⽇时:分 datetime-local:年-⽉-⽇时:分 month:年-⽉ time:时:分 week:年-W21 --> <input type="date" /> <input type="datetime" /> <input type="datetime-local" /> <input type="month" /> <input type="time" /> <input type="week" /> </div>
效果
参看文章https://wenku.baidu.com/view/86ccead29d3143323968011ca300a6c30c22f1b3.html