今天做个小的测试页面,看起来挺简单的,但是做起来还是碰到了2个比较棘手的问题,上网找了些资料,供以后参考!!

 

HTML的label标签大家应该不会陌生,什么?没用过?那可以好好看下aoao的这篇《各位大大行行好,给checkbox配个老婆(label)吧》文章。一般在表单中使用,给类似的checkbox或者radio框配上label,明显有助于改善用户体验。

这里借用一下aoao的测试示例:

点啊点啊点这里
点啊点啊点这里也没用

上面测试示例的代码如下:

 
 
  
  1. <input type="checkbox" name="testtest" id="testtest" /> 
  2. <label for="testtest">点啊点啊点这里</label><br /> 
  3. <input type="checkbox" name="testtest" />点啊点啊点这里也没用 

好了,明显感觉的出点文字就能勾选的舒坦吧,当然要使这个label生效,我们只需要给input配一个唯一的id号,然后label标签使用for属性写上这个id号就可以了,当然不希望使用id号的话可以通过下面这种方式使用label功能:

 
 
  
  1. <label> 
  2. <input type="checkbox" name="testtest" /> 
  3. 点啊点啊点这里  
  4. </label> 

其实就是把input放到label里。好了,说了这么多,其实主要为接下来的正文铺垫一下。

 

现在做Web UI的都希望自己表单的input按钮多么多么美观,于是使用各种按钮背景,一般情况下我们这样考虑我们按钮的背景:

登录.png

这个背景可以采用简单的渐变或者高光背景然后repeat-x,边框直接设置border就可以了,似乎这种想法没有问题,比如下面简单的渐变背景:

按钮背景.png

然后采用下面的样式针对于按钮(这里CSS进行了简略处理,只作为演示,不保证每个浏览器效果一致):

 
.button {
  background:#fff url("btnbg.png") repeat-x 0 center;
  height:25px;
  width:130px;
  border: #707070 1px solid;
}


 

 
   
  1. <input type="button" class="button" value="登录" /> 

然后我们的按钮显示如下:

登录按钮演示.png

恩,很好,貌似也没有什么问题,但是我们打开IE7或者IE6浏览器,点击这个按钮的时候就会发现问题所在了:

浏览器测试按钮黑框.png

好吧,万恶的IE,不过IE9下没发现什么问题,IE8没有测试,如果说你不建议点击时的黑框的话,那么如果我们把type设置为submit,是的,提交表单经常需要submit按钮,就像下面这样:

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

你会发现submit初始状态就是这种焦点获取的黑框样式:

submit按钮黑框.png

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

各类按钮背景.png

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

 
 
  
  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> 

好了,label的又一个妙用我就讲到这里啦!测试代码这里下载:按钮黑框测试.zip

原文链接:http://wangye.org/blog/archives/302/