我已将 CSS 样式添加到我的 Web 表单的提交按钮中。然而，虽然它看起来像我希望的那样在我的笔记本电脑上 - 我尝试了 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;
}
我创建了一个 JSFiddle – 位于 http://jsfiddle.net/rpE3w/1/ – 这样就可以在浏览器中查看。
在 PC 上，该按钮是一个带有白色字体的纯紫色矩形，而在移动浏览器上查看它似乎会产生一个圆形渐变按钮。
提前非常感谢。
最佳答案
您可以使用可点击的图像而不是输入来推出自己的。在 Mac、Windows、Linux、Android、iOS、Windows Mobile 和 Blackberry 之间，如果您为浏览器提供按钮外观的任意选择，则它在所有浏览器中的外观将有所不同。图像会更加一致。
关于html - 如何使我的 HTML 表单按钮在移动和桌面浏览器中看起来相同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14327587/