2

我已将 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 上该按钮是一个带有白色字体的纯紫色矩形，但在移动浏览器上查看它似乎会产生一个圆形的渐变按钮。

提前谢谢了。

4

3 回答 3

4

您可以使用可点击的图像而不是输入来滚动自己的图像。在 Mac、Windows、Linux、Android、iOS、Windows Mobile 和 Blackberry 之间，如果您让浏览器选择按钮的外观，那么它在所有浏览器中的外观都不会相同。图像将更加一致。

于 2013-01-14T22:10:25.247 回答
1

看来我不是唯一一个 在 iPad/iPhone 上遇到 CSS 提交按钮奇怪渲染问题的人。

正如 Francesco 指出的那样，这是 iOS 设备完成的渲染错误，要禁用按钮修改，我只需要添加

-webkit-appearance: none;

对于我不想不规则呈现的任何类或 ID。

于 2013-01-16T21:38:35.653 回答
0

也不仅仅是 iOS 设备。Android 设备 - 至少是那些使用 Chrome 和 Firefox 的设备 - 具有类似的按钮呈现行为。

于 2020-06-11T18:23:55.173 回答