为什么我加背景图片后input上边右边会有加粗了呢？
checkbox如何改变颜色美化一下，谢谢！
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title></title>
<style>
.logo{ width:150px; height:150px; position:absolute; top:20%; left:50%; margin-left:-75px; margin-top:-75px; }
input{ display:block;}
input:nth-child(1){ width:195px; height:30px; background:url(images/icon_login_username_n.png) no-repeat; background-position:3% 40%;
padding-left:20%;}
input:nth-child(2){ margin-top:2%; width:195px; height:30px; margin-top:5%; background:url(images/icon_login_password_n.png) no-repeat; background-position:3% 40%; padding-left:20%; }
input:nth-child(3){ background:#00F; display:inline;margin-top:5%; }
.Login{ width:250px; border:none; background:#3497da; color:#ffffff; height:35px;margin-top:10%; outline:none;}
.wechat{ width:250px; border:none; background:#7aaf79; color:#ffffff; height:35px; margin-top:5%; outline:none;}
.userbox{ width:250px;
height:250px; position:absolute; top:50%; left:50%; margin-left:-125px; margin-top:-125px; }
.userbox span{ font-size:13px; margin-bttom:50%;}
</style>
</head>
<body>
<div class="logo">
<img src="images/login-logo.png" width="157" height="69">
</div>
<div class="userbox">
<form action="form_action.asp" method="get">
<input type="text" name="user" value="用户名">
<input type="password" name="password" value="密码">
<input type="checkbox" name="checkbox"><span>记住密码</span>
<input type="button" value="登录" class="Login">
<input type="button" value="微信登录" class="wechat">
<form>
</div>
</body>
</html>
-webkit-appearence:none;
浏览器自带的效果，须在css取消各大浏览器默认的input的css.
@elbert_liu 正解。简单说就是屏蔽掉浏览器自身控件css 然后自己写css 就可以自定义控件了！