停止Safari移動從給出輸入按鈕圓角

我想主題說這一切。在Iphone，Ipod或Ipad上查看時，我有一個Web應用程序，輸入提交按鈕具有圓角。有沒有辦法阻止它？停止Safari移動從給出輸入按鈕圓角

165

如果添加...

input, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius: 0; 
}

然後你的按鈕將繼承您已經申請了其他任何瀏覽器的CSS樣式。

2011-03-10 17:36:04 Duopixel

這不適用於iPad2，iOS 5.1.1。但我不能肯定它不會在其他iOAS設備上工作，因爲我沒有任何測試。但是，Roel的'-webkit-border-radius：0px'解決方案*可以工作。 – CoreDumpError 2012-07-05 23:00:11

如果您沒有應用-webkit-appearance：none，那麼Safari會對其可應用的屬性（即'font-size'和'color'）產生挑剔。最好的解決方案是同時應用這兩個。 – Duopixel 2012-07-05 23:27:18

Reporting in以確認此解決方案適用於iPad，iOS 5.1.1。 – 2013-01-18 06:50:56

沒有爲我工作，-webkit外觀：無。

這並不：

input[type=submit] { 
    -webkit-border-radius:0px; 
}

我有圓角同樣的問題與背景圖像的按鈕，只需在iPhone上。

2011-12-16 08:33:06 Roel

確認：最高投票答案在這裏（由Duopixel）不起作用，但Roel的答案是，這可能是由於蘋果的移動webkit實施在這幾個月中發生了變化。 – CoreDumpError 2012-07-05 23:02:12

@Cor eDumpError - 你的意思是它不適用於你。該解決方案爲我工作 - 我剛剛實施它。不知道爲什麼我們遇到不同的結果。然後再一次，你的帖子是在半年前發佈的，所以我無法判斷你是否仍然遇到同樣的問題。 – 2013-01-18 07:04:09

@Rel，你可能只是有優先問題......？ – 2014-06-25 11:58:48

我有一個網站輸入提交類型=「圖像」。上述固定圓角的這vairation：

input[type=image] { 
    -webkit-border-radius:0px; 
}

2012-01-05 03:21:08 RevConcept

您可以嘗試使用下面的CSS：

-webkit-appearance:none;

2013-09-06 12:03:54 dthukka

我發現，在iPad 2有你使用以下：

-webkit-appearance:none; 
border-radius: 0;

在你的按鈕類。

2014-12-18 09:36:44

回答