在输入类型搜索上调整border-radius不能在移动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;
    }

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

我尝试添加：

    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，那对我来说非常适合;