首页 > web前端 > css教程 > 正文

如何去除 iPhone/Safari 中输入字段的圆角?

Barbara Streisand
发布: 2024-10-30 21:54:02
原创
921 人浏览过

How to Remove Rounded Corners from Input Fields in iPhone/Safari?

消除 iPhone/Safari 输入元素舍入

输入字段通常在 iPhone/Safari 浏览器中呈现圆形外观,与所需的效果相冲突矩形设计。本文深入探讨通过 CSS 或元数据修改输入元素样式的方法。

iOS 5 及更高版本的解决方案:

在 iOS 5 及更高版本上删除圆角,实现以下 CSS:

<code class="css">input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}</code>
登录后复制

替代方法:

针对 iOS 特定的圆角去除,或者在跨平台规范化不可行的情况下,请考虑以下 CSS:

<code class="css">input {
  -webkit-border-radius: 0;
}</code>
登录后复制

但是,请注意,对此类前缀属性的支持将来可能会停止。

旧版浏览器解决方案:

对于较旧的 iOS 版本,需要使用 -webkit-appearance 属性:

<code class="css">input {
    -webkit-appearance: none;
}</code>
登录后复制

以上是如何去除 iPhone/Safari 中输入字段的圆角?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!