为什么要写这个文章呢？是因为写页面不可避免的就要用到表单控件啊，当然在我用最常用的text和button的时候，基本上用css直接改就可以覆盖其表单控件。 BUT！！ 当我用到一些单选框、多选框、数字框、还有文件框的时候，就有了这种默认样式太过强大，超级的不合群（和整体的风格完全不同，什么鬼啊都是！），而且这些样式随着浏览器的不同样式还不一样，而且和各种不一样的系统有各自的风格，下面有一些我在使用过程中遇到的部分type的input样式，我也查了一些资料，这篇将不定期更新~
- 目录
- 自定义文本框input[type="text"]
- 自定义单选框、多选框
- input[type="radio"]，input[type="checkbox"]
- 图片
- 字体图标
- 自定义文件框 input[type="file"]
- 自定义数字框 input[type="number"]
自定义文本框input[type="text"]
哈哈，这个改样式其实很简单，但是我还是要总结完整： 看一看不同浏览器中的文本框什么样？ Chrome的文本框——hover的时候没有状态，这是focus的时候的状态，渐变的蓝色框框。
不过这个最简单，第一个是要去掉那个边框，第二个就是要去掉IE浏览器中的叉叉 下面是html
复制代码
css
#text{ outline:none; border: 1px solid orange; /*上面这个就可以解决问题啦*//*下面这个就是随意写啦*/ height: 30px; line-height: 30px; width: 140px; padding: 0 5px; font-size: 18px;}#text::-ms-clear{ display: none;} /*这个只适用于IE10哦，如果要兼容IE9，IE8说是要用一个元素定位到这里，也有人说要用textarea来代替text，目前也没什么更好的办法*/复制代码 好了这下差不多了。
密码框input[type="password"]也是一样哦
自定义单选框、多选框
input[type="radio"]，input[type="checkbox"]
这个框框，看看他的本来面目 Chrome的单选框——灰灰的~
Firefox和IE的单选框——扁平化
下面来优化：有两种方式，一种是找图片，让UI做一个和页面风格一样的单选框图片。还有一种就是使用字体图标，方便好使。 他们的html格式是不变的——使用label+input的形式去自定义样式
图片
先上html代码
复制代码
然后上css代码
/*我从阿里巴巴下了一个32px × 32px的图标，放在了同目录下*//*把原来的单选框隐藏掉*/input[type="radio"]{ appearance: none; -webkit-appearance: none; outline: none; display: none;}label{ display: inline-block; cursor: pointer;}/*代替的图标*/label input[type="radio"]+i{ width: 32px; height: 32px; display: block; background: url("./radio.png") no-repeat; float: left;}/*选中的时候代替的图标*/label input[type="radio"]:checked+i{ background: url("./radio-active.png") no-repeat;}/*后面的文字说明*/label input[type="radio"]~span{ display: block; line-height: 32px; height: 32px; float: left; font-family: 'Microsoft Yahei';}/*选中的时候文字说明*/label input[type="radio"]:checked~span{ color: #38d6ff;}复制代码 下面看一下效果图：
字体图标
上html代码，只是在i标签里面加了font-awesome的字体图标
复制代码
css稍微有些变化
input[type="radio"]{ appearance: none; -webkit-appearance: none; outline: none; display: none;}label{ display: inline-block; cursor: pointer;}label input[type="radio"]+i{ width: 32px; height: 32px; display: block; float: left; text-align: center; /*字体图标垂直水平居中*/ line-height: 32px; font-size:18px; /*字体图标大小用字体大小来控制*/}label input[type="radio"]~span{ display: block; line-height: 32px; height: 32px; float: left; font-family: 'Microsoft Yahei';}复制代码 字体图标需要一些jquery代码
$("i").click(function(){ //如果是没有选中的情况 if($(this).is(".fa-circle-o") == true){ //当前的字体颜色改变，后面的字体改变 $(this).css("color","#38d6ff").removeClass("fa-circle-o").addClass("fa-dot-circle-o").next().css("color","#38d6ff"); }else{ //选中的情况 $(this).css("color","#000").removeClass("fa-dot-circle-o").addClass("fa-circle-o").next().css("color","#000"); }})复制代码 效果图如下
自定义文件框 input[type="file"]
文件框原来是什么样？ Chrome的文件框
赶紧的粉刷匠的工程开启~~~~
下面来上代码，先了解一下html的结构
复制代码
然后我们需要看看如何给这两个元素来设置样式
/*input文件的样式，隐藏*/.myFile{ width:0; height:0; display:none;}/*按钮的样式，根据自己的需求来定*/.clickMe{ width: 105px; height: 30px; line-height: 30px; color: #fff; background-color: #00c8ff; text-align: center; cursor: pointer; float: left; margin-right: 10px;}/*选择文本名称的样式*/.textShow{ width: 100px; height: 30px; line-height: 30px;}复制代码 下面就是js代码了，用的jquery记得引用的时候要下下载jquery哦~
//给按钮绑定点击事件$('.clickMe').off("click").on("click",function(){ //当文件选择完毕之后，触发了改变的事件 $("#myFile").off('change').on('change',function(){ //获得的是绝对路径，并不是真实的路径，只是一个虚拟的路径 var fileFullName = $(this).val(); console.log(fileFullName); //获得的是文件名（正则表达式） var strFileName = fileFullName.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1"); console.log(strFileName); //获得的是后缀名（正则表达式） var fileExt = fileFullName.replace(/.+\./,""); console.log(fileExt); //将完整的名字填入文本框中 var realFileName = strFileName + "."+fileExt; $(".textShow").text(realFileName); }) //触发input的点击事件 $(".myFile").click(); })复制代码 获取文件的名称的方法很多，这只是用正则表达式来获取的。
下面来看看自定义的文件框是啥样？
完了之后会总结一些文件的表单控件的一些东西。还是就着这次的主题来~，这样的文件表单控件的样式就完成了。
自定义数字框 input[type="number"]
看看这默认的框
其实这个的主要功能就是计数，一些购物网站上会用到比较多，下面来大改造一下： 先来看一下html的结构
复制代码+ -
然后是css添加样式
/* 清除浮动 */.clearfix::before,.clearfix::after{ content:""; height: 0; line-height: 0; display: block; visibility: none; clear: both;}.clearfix { *zoom: 1;}/*浮动*/.f_l{ float:left;}/*自定义数字框配置*/input[type="number"]{ width: 36px; height: 36px; border: 2px solid skyblue; border-radius: 4px 0 0 4px; /*左上边和左下边有弧度*/ color: #137ac6; font-size: 20px; padding: 0 10px; border-right: none; outline: none; /*去掉外边框*/ -moz-appearance:textfield;/*给火狐浏览器去掉上下加减号*/}/*数字框旁边的加减号去掉*/input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none;}input[type="number"]+div{ cursor: pointer;}/*按钮的通用样式*/input[type="number"]+div i{ display: block; width: 28px; height: 17px; background-color: #137ac6; font-style: normal; line-height: 17px; text-align: center; font-size: 18px; color: #fff; border: 2px solid skyblue;}/*加号键的特殊样式，右上角有弧度*/input[type="number"]+div > .add{ border-bottom: none; border-radius: 0 4px 0 0;}/*减号键的特殊样式，右下角有弧度*/input[type="number"]+div > .subtract{ border-radius: 0 0 4px 0;}复制代码 然后需要对两个div进行绑定事件，一个加数字一个减数字，减的数字不能超过0···
//给加号按钮绑定事件$("#add").on("click",function(){ var add = $("#number").val(); add++; $("#number").val(add);})//给减号按钮绑定事件$("#subtract").on("click",function(){ var subtract = $("#number").val(); if(subtract > 0){ subtract--; } $("#number").val(subtract);})复制代码 然后用一张图看看效果: )
好了，剩下的就等遇到的时候再总结吧。 That's all !
©burning_韵七七