关闭iPhone / Safari输入元素舍入 [英] Turn off iPhone/Safari input element rounding

问题描述

我的网站在iPhone / Safari浏览器上呈现效果很好，但有一个例外：我的文字输入字段有一种奇怪的圆形样式，与我的网站其他部分看起来不太好。

My website renders well on the iPhone/Safari browser, with one exception: My text input fields have a weird rounded style which doesn't look good at all with the rest of my website.

有没有办法指示Safari（通过CSS或元数据）不舍入输入字段，并按预期呈现矩形？

Is there a way to instruct Safari (via CSS or metadata) not to round the input fields and render them rectangular as intended?

推荐答案

在iOS 5及更高版本中，好的 border-radius b
$ b

On iOS 5 and later, good ol' border-radius does the trick:

input {
    border-radius: 0;
}

如果您只能删除iOS上的圆角或其他原因对平台上的圆角进行标准化，请使用前缀 -webkit-border-radius 属性，但仍然受支持。当然，请注意，苹果可以随时选择放弃对前缀属性的支持，但考虑到其他平台特定的CSS功能，它们会保留它。

If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use the prefixed -webkit-border-radius property instead, which is still supported. Of course do note that Apple can choose to drop support for the prefixed property at any time, but considering their other platform-specific CSS features chances are they'll keep it around.

在旧版本上，您必须设置 -webkit-appearance：none ：

On legacy versions you had to set -webkit-appearance: none instead:

input {
    -webkit-appearance: none;
}

这篇关于关闭iPhone / Safari输入元素舍入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！