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 除外，它为每个 Angular 提供相等的半径。如果我将输入类型更改为文本，它会起作用，但对于搜索和提交则不起作用。

我试过添加:

    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。我在带有 ios 5.1 和 4.3 的 iphone 上进行了测试，如果使用 -webkit-appearance:none 对我来说效果很好；