首页 > 代码库 > 用label标签解决IE下input按钮点击或者submit按钮的黑边框
用label标签解决IE下input按钮点击或者submit按钮的黑边框
如果我们把input的type设置为submit,是的,提交表单经常需要submit按钮,就像下面这样:
.代码
- <inputtype="submit"class="button"value=http://www.mamicode.com/"登录"/>
你会发现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前端框架!
.代码
- <style type="text/css">
- .button-fixed {
- background:#fff url("btnbg.png") repeat-x 0 center;
- height:25px;
- width:130px;
- border: none;
- margin:0;
- cursor: pointer;
- }
- .button-wrapper {
- display:block;
- padding:0;
- width:130px;
- border: #707070 1px solid;
- cursor: pointer;
- }
- </style>
- label模拟去黑框普通button按钮
- <br />
- <label class="button-wrapper">
- <input type="button" class="button-fixed" value=http://www.mamicode.com/"登录" />
- </label>
- <br />
- label模拟去黑框submit按钮
- <br />
- <label class="button-wrapper">
- <input type="submit" class="button-fixed" value=http://www.mamicode.com/"登录" />
- </label>
用label标签解决IE下input按钮点击或者submit按钮的黑边框
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。