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

Question

这是我的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，它为每个角落提供相等的半径。如果我将输入类型更改为 text 它可以工作，但对于搜索和提交它不会。

我试过添加：

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

有任何想法吗？提前致谢！

Answer 1

你可以试试

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

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