我已经在Web表单的提交按钮表单中添加了CSS样式。但是，虽然看起来像我希望在笔记本电脑上看到的那样-我尝试了Safari和Chrome浏览器，并且按钮看起来都一样-移动按钮的形状和颜色都不正确。
相关HTML：
<html>
<body>
<form action="{{ post somewhere }}" method="post">
<strong>+1</strong><input name="number-form" placeholder="4045553829" id="number-input" maxlength="10" type="text" onkeypress="return onlyNumbers()"></input>
<input type=submit value="verify number" class="submit-button"></input>
</form>
</body>
</html>
对应的CSS：
body {
background-color: #fff;
display: block;
position: absolute;
height: auto;
width: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 100px;
margin-left: 0px;
}
form {
width: 650px;
margin-left: auto;
margin-right: auto;
}
strong {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 2em;
padding-right: 10px;
}
input, #number-input, #veriform {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 2.5em;
color: #181818;
}
#number-input {
width: 260px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #a8a8a8;
}
.submit-button {
background-color: #8a50c9;
color: #fff;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
border: none;
}
我在http://jsfiddle.net/rpE3w/1/创建了一个JSFiddle，因此可以在浏览器中查看它。
虽然在PC上，该按钮是带有白色字母的实心紫色矩形，但是在移动浏览器中查看它似乎会产生一个圆形的渐变按钮。
非常感谢。
您可以使用可点击的图像而不是输入来滚动自己的图像。在Mac，Windows，Linux，Android，iOS，Windows Mobile和Blackberry之间，如果您给浏览器选择按钮的外观，则在所有浏览器中外观都不相同。图像将更加一致。
[看来我不是唯一遇到此问题的人CSS submit button weird rendering on iPad/iPhone。
正如Francesco指出的，这是iOS设备完成的渲染错误，要禁用按钮修改，我只需要添加
-webkit-appearance: none;
对于任何类或ID，我都不想被不规则地呈现。
也不只限于iOS设备。 Android设备-至少使用Chrome和Firefox的设备-具有类似的按钮渲染行为。