调整输入类型搜索的边框半径不适用于移动 safari

Posted 2023-03-14

【中文标题】调整输入类型搜索的边框半径不适用于移动 safari

【英文标题】：Adjust border-radius on input type search not working on mobile safari

【发布时间】：2012-05-29 11:56:06

【问题描述】：

这是我的html：

    <form action="/" method="get" class="searchForm">
        <input type="search" placeholder="Search...">
        <input type="submit" value="">
    </form>

和我的CSS：

    input[type="search"]
        height: 31px;
        width: 254px;
        border: 1px solid #ccc;
        border-right: none;
        padding: 0 5px;
        float: left;
        border-radius: 5px 0 0 5px;
    

它在所有浏览器中都能正常工作，除了移动 safari，它为每个角落提供相等的半径。如果我将输入类型更改为文本它可以工作，但搜索和提交它不会。

我已经尝试添加：

    input 
        -webkit-appearance: none;
        border-radius: 0 !important;
    

有什么想法吗？提前致谢！

【参考方案1】：

你可以试试

使用 -webkit 前缀作为边框半径。 使用边框半径的长手版本（见此：-http://blog.lesjames.com/post/8510513712/mobile-safari-and-border-radius）

如果这不起作用，请尝试提供更多详细信息，例如 ios 版本、ipad/iphone。 我在 iphone 上使用 ios 5.1 和 4.3 进行了测试，如果使用 -webkit-appearance:none，对我来说非常适合；

【讨论】：

我尝试了这些，但仍然没有运气。我正在使用 ios 5.1.1。这是link 谢谢！

您的链接也不适用于我的链接，但是当我将 -webkit-appearance 从文本字段（如您在您的网站中所写）更改为无时，它对我有用。就像在 jsfiddle.net/Eg9rP/3 中一样，第一个显示不正确，而第二个显示正确。