iPad輸入按鈕造型

2013-07-30 99 views 8 likes

我在iPad中查看時主要在表單按鈕樣式中存在不一致。出於某種原因，background-color和padding的CSS樣式不適用於iPad。我得到了默認的按鈕，帶有漸變和圓角，這不是我想要的。我也想避免使用圖像。iPad輸入按鈕造型

CSS

.mailBtn { 
    background: #fff; 
    border:0; 
    color: #000; 
    font: 0.625em 'SansPro Light',sans-serif; 
    margin: 0 0 0 -3px; 
    padding: 11px 7px 10px; 
    text-transform: uppercase; 
}

HTML

<input type="submit" value="Send" class="mailBtn">

任何想法，我怎麼能保持一貫的造型跨平臺的純CSS？

來源

2013-07-30 Babis Sougias

@otinanai我不希望另一個服務器請求這樣一個簡單的問題。 –

回答

您需要在您的.mailBtn課程中使用-webkit-appearance:none。此外，如果您在input字段處有圓角，則可以使用-webkit-border-radius:0。

我通常在我的表單元素重置這兩個屬性如下圖所示：

input, textarea, button { 
    -webkit-appearance: none; /*Safari/Chrome*/ 
    -moz-appearance: none; /*Firefox*/ 
    -ms-appearance: none; /*IE*/ 
    -o-appearance: none; /*Opera*/ 
    appearance: none; 

    -webkit-border-radius: 0; 
}

...所以，我保持瀏覽器之間的風格的一致性。

來源

2013-07-30 13:45:25 otinanai

謝謝！我不知道這個屬性。 –

按鈕上還有一個邊距/填充。任何方式來解決這個問題？ –

只是重置按鈕的邊距和填充：'button {margin：0;填充：0}' – otinanai