ios - 圆 Angular 导致 IOS 设备上的选择框出现样式问题

Question

我用来在我们的 wordpress 网站上“排序产品”的选择框在 IOS 设备上导致了一些样式问题。

我希望选择框具有圆 Angular 。它在 IOS 上执行此操作，但显示其默认样式的边缘并且 overflow:hidden 不起作用

如何去除边 Angular ？

select {
    width: auto;
    height: 30px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    -khtml-border-radius: 40px;
    text-indent: 7px;
    overflow: hidden;
    outline: 0;
}

  <select name="orderby" class="orderby"><option value="popularity">Sort by popularity</option><option value="rating">Sort by average rating</option><option value="date">Sort by newness</option><option value="price">Sort by price: low to high</option><option value="price-desc">Sort by price: high to low</option><option value="alphabetical">Sort by name: A to Z</option><option value="reverse_alpha">Sort by name: Z to A</option><option value="on_sale_first">Show sale items first</option><option value="random_list" selected="selected">Random</option> </select>

Answer 1

iOS 设备似乎不支持超过 10px 的 border-radius。因此，您可以将所有设备的 border-radius 设置为 10px，或者您可以在 ios 设备上将 Safari 设为目标，如下所示:

@supports (-webkit-touch-callout: none) {
    /* ios device specific */
    select, select.form-control {
        border-radius: 10px;
    }
}

如果你确实想在 iOS 设备上也有 40px 的 border-radius，那么你可以完全删除背景，然后使用自定义箭头图像(因为这也会删除箭头)

select, select.form-control {
        -webkit-appearance: none;
        -webkit-border-radius: 0px;
        background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
        background-position: 100% 50%;
        background-repeat: no-repeat;
    }