为什么要写这个文章呢？是因为写页面不可避免的就要用到表单控件啊，当然在我用最常用的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的时候的状态，渐变的蓝色框框。
chorme默认文本框.png
Firefox的文本框——hover和focus的状态差不多，都是蓝色边框，这个没有渐变
firefox默认文本框.png
IE的文本框——向来就是特立独行的鹅，hover状态是蓝色的，focus状态就变成了黑色的框，IE10还有个小×是什么鬼，我点了一下我的value值都木有了，也是智能到要命。
IEhover默认文本框.png
IEfocus默认文本框.png
不过这个最简单，第一个是要去掉那个边框，第二个就是要去掉IE浏览器中的叉叉
下面是html
<input type="text" value="这是一个文本框" id="text"/>
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，目前也没什么更好的办法*/
好了这下差不多了。
自定义文本框.png
密码框input[type="password"]也是一样哦
自定义密码框.png
自定义单选框、多选框
input[type="radio"]，input[type="checkbox"]
这个框框，看看他的本来面目
Chrome的单选框——灰灰的~
Chrome的默认单选框.png
Firefox和IE的单选框——扁平化
Firefox和IE的默认单选框.png
下面来优化：有两种方式，一种是找图片，让UI做一个和页面风格一样的单选框图片。还有一种就是使用字体图标，方便好使。
他们的html格式是不变的——使用label+input的形式去自定义样式
图片
先上html代码
<!--label代表了整个单选域，里面的input是要有的，只不过是要隐藏掉，后面的i元素，是利用表单的图片进行的替代，后面的span用来写对应的文本-->
<label>
<input type="radio" name="haha" value="haha"/>
<i></i>
<span>haha</span>
</label>
<label>
<input type="radio" name="haha" value="hehe"/>
<i></i>
<span>hehe</span>
</label>
然后上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;
}
下面看一下效果图：
自定义单选框.png
字体图标
上html代码，只是在i标签里面加了font-awesome的字体图标
<label>
<input type="radio" name="haha" value="haha"/>
<i class="fa fa-circle-o"></i>
<span>haha</span>
</label>
<label>
<input type="radio" name="haha" value="hehe"/>
<i class="fa fa-circle-o"></i>
<span>hehe</span>
</label>
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");
}
})
效果图如下
字体图标自定义单选框.png
自定义文件框 input[type="file"]
文件框原来是什么样？
Chrome的文件框
Chrome的默认文件框.png
firefox的文件框（鼠标移上去的时候）
firefox的默认文件框.png
再来看看奇葩的IE的默认文件框（这也是鼠标hover状态的，我就不一一截不同的版本了，截完就明年了）
谁也不服就服你的IE默认文件框.png
赶紧的粉刷匠的工程开启~~~~
下面来上代码，先了解一下html的结构
<!--文件的input，需要隐藏的-->
<input type="file" id="myFile" class="myFile"/>
<!--实际显示出来的按钮-->
<div class="clickMe"></div>
<!--实际显示出来选择的文件名称-->
<span class="textShow"></span>
然后我们需要看看如何给这两个元素来设置样式
/*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();
})
获取文件的名称的方法很多，这只是用正则表达式来获取的。
下面来看看自定义的文件框是啥样？
自定义文件框.png
完了之后会总结一些文件的表单控件的一些东西。还是就着这次的主题来~，这样的文件表单控件的样式就完成了。
自定义数字框 input[type="number"]
看看这默认的框
chrome的默认数字框.png
Firefox的默认框
firefox的默认数字框.png
IE的默认框——和文本框没有什么区别好哇
IE的默认数字框.png
其实这个的主要功能就是计数，一些购物网站上会用到比较多，下面来大改造一下：
先来看一下html的结构
<!--外面要记得清除浮动，什么方法都可以-->
<div class="clearfix">
<!--这个是数字框-->
<input type="number" name="number" value="1" class="f_l" id="number" />
<!--这个是后面的上下加减按钮-->
<div class="f_l">
<i class="add" id="add">+</i>
<i class="subtract" id="subtract">-</i>
</div>
</div>
然后是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);
})
然后用一张图看看效果: )
自定义数字框.png
好了，剩下的就等遇到的时候再总结吧。
That's all !
©burning_韵七七
网友评论