iphone覆蓋我的所有樣式在輸入[type =「submit」]

我在此JSFIDDLE中隔離了我的input[type="submit"]。iphone覆蓋我的所有樣式在輸入[type =「submit」]

代碼爲好，

input[type="submit"] { 
    width: 100%; 
    height: 40px; 
    background: #FFD100; 
    border-radius: 5px; 
    box-shadow: 0 5px 0 #A58B1E; 
    border: none; 
    font-size: 20px; 
    color: #2b2b2b; 
    cursor: pointer; 
    position: relative; 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); 
} 

input[type="submit"]:active, input[type="submit"]:focus { 
    box-shadow: 0 3px 0 #A58B1E; 
    top: 2px; 
    outline: none; 
}

一切看起來只是，當我檢查了網站在我的iPhone大。由於我的客戶想要一個快速響應的網站，我想這個按鈕在每個設備上看起來都很棒。

哦，男孩，我很錯，因爲在我的iphone上，按鈕真的很可怕。我將包含移動視圖的圖像和網站的網址。

任何想法，爲什麼發生這種情況或我可以重寫它？

（Chatfield Drilling Live Site）

Submit button problem

來源

2013-12-17 Josh Powell

的[CSS樣式對iPad/iPhone的輸入按鈕]可能重複（http://stackoverflow.com/問題/ 5449412/css-styling-for-input-buttons-on-ipad-iphone） – sshow

你可能會尋找：

-webkit-appearance: none;

來源

2013-12-17 17:01:44 Doidgey

嗯，這似乎是伎倆。我應該爲每個輸入都做這個嗎？他們似乎都顯示我的風格很好。 –

我第一次遇到這個問題時，我需要修復：http://trentwalton.com/2010/07/14/css-webkit-appearance/ - 非常有用的知道 - 你可以申請你認爲合適的地方 – Doidgey

。。也忘了回答，是的，你可以用它輸入/ textareas – Doidgey

您需要在您的按鈕，使用-webkit-appearance:none。

另外，如果你在輸入字段有圓角，你可以使用下面的CSS：

input { 
    -webkit-border-radius:0; 
}

來源

2013-12-17 17:15:49 otinanai

iphone覆蓋我的所有樣式在輸入[type =「submit」]

回答

相關問題