用label标签解决IE下input按钮点击或者submit按钮的黑边框

如果我们把input的type设置为submit，是的，提交表单经常需要submit按钮，就像下面这样：

.代码 

1. <inputtype="submit"class="button"value="登录"/>  

 

 

 

你会发现submit初始状态就是这种焦点获取的黑框样式：精心开发5年的UI前端框架！

 

怎么办？如果设置border:none，也就是说不要border，那么这种黑框就没 有了，所以有种解决办法是直接把框写死到背景上，然后去除border，即设置border:none。比如下面这个按钮样式的背景罗列。这种办法的缺点 想必大家都清楚，就是灵活性差了点，有多少size的按钮就要准备多少size的背景。

一直以来我也很天真的认为就这么一种办法了，直到我膝盖中了一箭，偶然一次查看 FaceBook的HTML代码发现了其高明之处，FB也使用了边框border，背景是背景的分离办法，但是其在IE7或者IE6下就是没有黑框，实现 方法很巧妙，就是利用了label的特性，具体思路就是input按钮去除框线（border:none），然后input外面套上 label，border写到label上，由于input被去除了border，所以不会出现黑框，同时外面的label有border，所以用户可以 看到正常的框线，当然由于label的特性，你点击label的时候也等于点击了input按钮，哦，对了，为了模拟得更好一点，你可以设置他们的 cursor为pointer，改良版的代码如下： 精心开发5年的UI前端框架！

.代码 

1. <style type="text/css">  
2. .button-fixed {  
3.   background:#fff url("btnbg.png") repeat-x 0 center;  
4.   height:25px;  
5.   width:130px;  
6.   border: none;  
7.   margin:0;  
8.   cursor: pointer;  
9. }  
10.       
11. .button-wrapper {  
12.   display:block;  
13.   padding:0;  
14.   width:130px;  
15.   border: #707070 1px solid;  
16.   cursor: pointer;  
17. }  
18. </style>  
19. label模拟去黑框普通button按钮  
20. <br />  
21. <label class="button-wrapper">  
22.     <input type="button" class="button-fixed" value="登录" />  
23. </label>  
24. <br />  
25. label模拟去黑框submit按钮  
26. <br />  
27. <label class="button-wrapper">  
28.     <input type="submit" class="button-fixed" value="登录" />  
29. </label>