如何讓我的HTML表單按鈕在移動和桌面瀏覽器中看起來完全相同？

我已將CSS樣式添加到提交按鈕窗體中。然而，雖然它看起來像我希望它會在我的筆記本電腦上 - 我嘗試了Safari和Chrome，並且按鈕顯示相同 - 移動按鈕的形狀不正確，着色不正確。如何讓我的HTML表單按鈕在移動和桌面瀏覽器中看起來完全相同？

相關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上，該按鈕是一個帶有白色字母的純紫色矩形，在移動瀏覽器上查看它似乎會產生一個圓形的漸變按鈕。

非常感謝提前。

來源

2013-01-14 zch

-1

看來，我不是唯一一個出現這個問題的人CSS submit button weird rendering on iPad/iPhone。

正如弗朗西斯指出，這是iOS設備做了渲染錯誤，並禁用按鈕修改我只需要

-webkit-appearance: none;

添加到我不想不規則地呈現任何類或ID 。

來源

2013-01-16 21:38:35 zch

您可以用可點擊的圖像而不是輸入滾動自己的圖像。在Mac，Windows，Linux，Android，iOS，Windows Mobile和Blackberry之間，如果您向瀏覽器提供該按鈕的任何選擇，它在所有瀏覽器中看起來都不一樣。圖像將更加一致。

來源

2013-01-14 22:10:25

感謝您的回答。我應該關心像素化，還是最好將背景製作成.SVG文件？ – zch

我很少發現我付出的努力和時間值得結果的SVG文件。 CSS3和div會像基於矢量一樣，並且可能更容易實現。就個人而言，一個PNG對我來說就足夠了。 –

我在手機上檢查了您的JSFiddle，您的按鈕與我的PC視圖相同，一個純白色的字母，沒有圓角的純紫色。

來源

2013-01-14 22:21:37 ChrisWilson4

感謝您的檢查 - 這很有趣。我嘗試在我的iPhone和iPad上使用移動Safari和Chrome。你在用什麼？ – zch

我使用了默認的android瀏覽器。 – ChrisWilson4

如何讓我的HTML表單按鈕在移動和桌面瀏覽器中看起來完全相同？

回答

相關問題