Html 关闭 iPhone/Safari 输入元素舍入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2918707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Turn off iPhone/Safari input element rounding
提问by Alex
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.
我的网站在 iPhone/Safari 浏览器上呈现良好，但有一个例外：我的文本输入字段有一种奇怪的圆角样式，与我网站的其余部分看起来一点也不好看。
Is there a way to instruct Safari (via CSS or metadata) not to round the input fields and render them rectangular as intended?
有没有办法指示 Safari（通过 CSS 或元数据）不要将输入字段四舍五入并按预期将它们呈现为矩形？
回答by BoltClock
On iOS 5 and later, good ol' border-radiusdoes the trick:
在 iOS 5 及更高版本上，good ol'border-radius可以解决问题：
input {
border-radius: 0;
}
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-radiusproperty 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.
如果您只能在 iOS 上删除圆角，或者由于某种原因无法跨平台规范化圆角，请改用 prefixed-webkit-border-radius属性，该属性仍然受支持。当然请注意，Apple 可以随时选择放弃对前缀属性的支持，但考虑到他们其他特定于平台的 CSS 功能，他们可能会保留它。
On legacy versions you had to set -webkit-appearance: noneinstead:
在旧版本上，您必须改为设置-webkit-appearance: none：
input {
-webkit-appearance: none;
}
回答by justadev
input -webkit-appearance: none;alone does not work.
input -webkit-appearance: none;单独是行不通的。
Try adding -webkit-border-radius:0px;in addition.
尝试添加-webkit-border-radius:0px;。
回答by KoemsieLy
It is the best way to remove the rounded in IOS.
这是在 IOS 中去除四舍五入的最佳方法。
textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
Note:Please don't use this code for the Select Option. It will have problem on our select.
注意：请不要将此代码用于选择选项。我们的选择会有问题。
回答by Fran?ois Romain
The accepted answer made radio button disappear on Chrome. This works:
接受的答案使 Chrome 上的单选按钮消失。这有效：
input:not([type="radio"]):not([type="checkbox"]) {
-webkit-appearance: none;
border-radius: 0;
}
回答by Johansrk
Here is the complete solution for Compass (SCSS):
这是 Compass (SCSS) 的完整解决方案：
input {
-webkit-appearance: none; // remove shadow in iOS
@include border-radius(0); // remove border-radius in iOS
}
回答by Chris Bernardi
For me on iOS 5.1.1 on a iPhone 3GS I had to clear the styling of a search field and the set it to the style intended
对于我在 iPhone 3GS 上的 iOS 5.1.1 我必须清除搜索字段的样式并将其设置为预期的样式
input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}
Doing -webkit-border-radius: 0;alone did not clear the native styling. This was also for a webview on a native app.
否则-webkit-border-radius: 0;单单没有明确的原生样式。这也适用于本机应用程序上的 webview。
回答by seanjacob
I had the same problem but only for the submit button. Needed to remove the inner shadow and rounded corners -
我有同样的问题，但仅限于提交按钮。需要去除内部阴影和圆角 -
input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
回答by Henrik N
If you use normalize.css, that stylesheet will do something like input[type="search"] { -webkit-appearance: textfield; }.
如果您使用 normalize.css，该样式表将执行类似input[type="search"] { -webkit-appearance: textfield; }.
This has a higher specificity than a single class selector like .foo, so be aware that you then can't do just .my-field { -webkit-appearance: none; }. If you have no better way to achieve the right specificity, this will help:
这比单个类选择器（如 ）具有更高的特异性.foo，因此请注意，您不能只执行.my-field { -webkit-appearance: none; }. 如果您没有更好的方法来实现正确的特异性，这将有助于：
.my-field { -webkit-appearance: none !important; }
.my-field { -webkit-appearance: none !important; }
回答by Ivin Raj
Please Try This one:
请试试这个：
Try Adding inputCss like this:
尝试input像这样添加CSS：
-webkit-appearance: none;
border-radius: 0;
回答by Jesse
I used a simple border-radius: 0; to remove the rounded corners for the text input types.
我使用了一个简单的 border-radius: 0; 删除文本输入类型的圆角。
