重定义按钮(type="button" | "submit" | "reset")样式
重定义按钮的样式是个有点麻烦的事。
举个例子:
<style type="text/css">
input{padding:5px 10px;border:none;}
</style>
<input type="button" value="确定" />
在ff下可以按照我们的意图,按钮默认的边框去掉了,有上下5px的内边距,左右10px的内边距。但ie6和ie7仍然保有边框,而且左右内边距大于10px。我们可以借助overflow:visible;属性,hack掉多余的左右padding。如果设置input的background就可以去掉边框效果。借助两个span标签,我们还可以做出简单的圆角效果。示例如下:
=====================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
</head>
<style type="text/css">
*{padding:0;margin:0;}
.btn{margin:10px;display:inline-block;border:1px solid #ccc;border-left:none;border-right:none;}
.btn span{margin:0 -1px;border:1px solid #ccc;border-top:none;border-bottom:none;display:inline-block;*position:relative;*left:-1px;}
.btn input{padding:5px 20px;border:none;overflow:visible;background:transparent;}
</style>
<body>
<span class="btn"><span><input type="button" value="确定" /></span></span>
<span class="btn"><span><input type="button" value="确定" /></span></span>
<span class="btn"><span><input type="button" value="确定" /></span></span>
<span class="btn"><span><input type="button" value="确定" /></span></span>
</body>
</html>
==============================================================
举个例子:
<style type="text/css">
input{padding:5px 10px;border:none;}
</style>
<input type="button" value="确定" />
在ff下可以按照我们的意图,按钮默认的边框去掉了,有上下5px的内边距,左右10px的内边距。但ie6和ie7仍然保有边框,而且左右内边距大于10px。我们可以借助overflow:visible;属性,hack掉多余的左右padding。如果设置input的background就可以去掉边框效果。借助两个span标签,我们还可以做出简单的圆角效果。示例如下:
=====================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
</head>
<style type="text/css">
*{padding:0;margin:0;}
.btn{margin:10px;display:inline-block;border:1px solid #ccc;border-left:none;border-right:none;}
.btn span{margin:0 -1px;border:1px solid #ccc;border-top:none;border-bottom:none;display:inline-block;*position:relative;*left:-1px;}
.btn input{padding:5px 20px;border:none;overflow:visible;background:transparent;}
</style>
<body>
<span class="btn"><span><input type="button" value="确定" /></span></span>
<span class="btn"><span><input type="button" value="确定" /></span></span>
<span class="btn"><span><input type="button" value="确定" /></span></span>
<span class="btn"><span><input type="button" value="确定" /></span></span>
</body>
</html>
==============================================================