备忘，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:300px;
margin: 30px auto;
}
input{
width: 100%;
padding: 6px 12px;
margin-left: 10px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
/*Chrome 下去除type == "number" 时 的右侧图标*/
#n1::-webkit-outer-spin-button,
#n1::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
/*火狐 下去除type == "number" 时 的右侧图标*/
input[type="number"]{-moz-appearance:textfield;}
/*IE下去除 右边的×*/
input::-ms-clear{display:none;}
/*IE下去除 小眼睛*/
#n3::-ms-reveal{display:none;}
</style>
</head>
<body>
<br><br><br>
<!--type == "number" 时 ，大浏览器下会有 上下箭头出现-->
<div>
<input type="number" id="n1">
</div>
<!--type == "tel" 时 ，部分浏览器下会有 X 号出现-->
<div>
<input type="tel" id="n2">
</div>
<!--type == "tel" 时 ，部分浏览器下会有 类似小眼睛一样的图标 出现-->
<div>
<input type="password" id="n3">
</div>
</body>
</html>
Chrome 、 火狐、 IE 都测试完毕，没什么问题，下面图片是IE下截图： （IE9 以上）
input 的属性： maxlength 在type=”number” 的情况下有些不好使；
需要再加上一句：
<div>
<input type="number" maxlength="5" oninput="if(value.length>5)value=value.slice(0,5)">
</div>酱紫就可以了~