blocks|key|972954|text|如果你加上...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972955|input,+textarea+{
++-webkit-appearance:+none;
++border-radius:+0;
}|code-block|syntax|javascript|972956|然后，您的按钮将继承您已应用于其他浏览器的任何CSS样式。|972957|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you add...

<pre><code>input, textarea {
 -webkit-appearance: none;
 border-radius: 0;
}
</code></pre>

Then your buttons will inherit any CSS styles that you have applied for other browsers.

blocks|key|972972|text|对我不起作用，-webkit-外观:无。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972973|这样做：|972974|input[type=submit]+{
++++-webkit-border-radius:0px;
}|code-block|syntax|javascript|972975|我也有同样的问题，在带背景图片的按钮上有圆角，只是在iPhone上。|972976|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Didn't work for me, the -webkit-appearance:none.

This does:

<pre class="lang-css prettyprint-override"><code>input[type=submit] {
 -webkit-border-radius:0px;
}
</code></pre>

I had the same issue with rounded corners on a button with background image, just on the iPhone.

blocks|key|973017|text|我有一个网站的输入提交图像“type=”。上面的计算固定了圆角：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|973018|input[type=image]+{
++++-webkit-border-radius:0px;
}|code-block|syntax|javascript|973019|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I had a site with an input submit type="image". This vairation of the above fixed the rounded corners:

<pre><code>input[type=image] {
 -webkit-border-radius:0px;
}
</code></pre>

blocks|key|757523|text|您可以尝试使用以下CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|757524|-webkit-appearance:none;|code-block|syntax|javascript|757525|更多信息：http://trentwalton.com/2010/07/14/css-webkit-appearance/|offset|length|757526|entityMap|0|LINK|mutability|MUTABLE|url|http://trentwalton.com/2010/07/14/css-webkit-appearance/^0|0|0|5|1K|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can try to use following CSS:

<pre><code>-webkit-appearance:none;
</code></pre>

More info: <a href="http://trentwalton.com/2010/07/14/css-webkit-appearance/" rel="noreferrer">http://trentwalton.com/2010/07/14/css-webkit-appearance/</a>

blocks|key|973156|text|我发现在iPad+2上你必须使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|973157|-webkit-appearance:none;
border-radius:+0;|code-block|syntax|javascript|973158|在您的按钮类中。|973159|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I've found that on iPad 2 you have to use the following:

<pre><code>-webkit-appearance:none;
border-radius: 0;
</code></pre>

in your button class.

blocks|key|973192|text|我发现，设置background:+linear-gradient(color1,+color2)可以摆脱苹果设备上过于圆角的问题，并在我尝试过的所有其他浏览器/平台上运行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|973193|entityMap^0|6|17|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I've found that setting <code>background: linear-gradient(color1, color2)</code> gets rid of the overly rounded corners on Apple devices and works on all other browsers/platforms I have tried.

blocks|key|973228|text|我通过为"button“和"submit”类型添加代码来解决问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|973229|+++input[type="submit"]+{
+++text-align:+center;
++++++++-webkit-appearance:none;
++++++++-webkit-border-radius:0px;
++++++++border-radius:0;
++++++++height:30px;
++++}

++++input[type="button"]+{
++++++++text-align:+center;
++++++++-webkit-appearance:none;
++++++++-webkit-border-radius:0px;
++++++++border-radius:0;
++++++++height:30px;
++++}|code-block|syntax|javascript|973230|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I solved by adding code for both the &quot;button&quot; and &quot;submit&quot; types:
<pre><code> input[type=&quot;submit&quot;] {
 text-align: center;
 -webkit-appearance:none;
 -webkit-border-radius:0px;
 border-radius:0;
 height:30px;
 }

 input[type=&quot;button&quot;] {
 text-align: center;
 -webkit-appearance:none;
 -webkit-border-radius:0px;
 border-radius:0;
 height:30px;
 }
</code></pre>

I guess the subject says it all. I have a web application when viewed on an Iphone, Ipod or Ipad, input submit buttons have rounded corners. Is there a way to stop this?

Stop Safari Mobile from giving input buttons rounded corners

我猜这个主题说明了一切。我有一个web应用程序，当在Iphone，Ipod或Ipad上查看时，输入提交按钮有圆角。有没有办法阻止这一切？

问阻止Safari Mobile为输入按钮提供圆角
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阻止Safari Mobile为输入按钮提供圆角EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阻止Safari Mobile为输入按钮提供圆角
EN