圆角在IOS设备上导致选择框样式问题

Question

我们在WordPress网站上使用的选择框“排序产品”会在iOS设备上引起一些样式问题。

我想让这个选择框有圆角。在iOS上，它确实做到了这一点，但显示其默认样式的边缘，overflow:hidden无法解决这个问题。

如何去掉这些圆角？

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>

- Patrick

---

你的意思是 iOS 上的 Chrome 还是 Safari？ - Oxthor

@Alex，我确实包含了HTML和CSS... - Patrick

这是一个链接，指向分类页面，页面右上角有排序选项。 - Patrick

目前我看到的唯一解决方案是设置-webkit-appearance: none，并通过图像添加框箭头： https://dev59.com/rm025IYBdhLWcg3wzpaK - Honsa Stunna

Answer 1

iOS设备似乎不支持超过10像素的border-radius。因此，您可以将所有设备的border-radius设置为10像素，或者像下面这样针对iOS设备上的Safari进行定位：

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

如果您希望在iOS设备上也具有40px的边框半径，则可以完全删除背景，然后使用自定义箭头图像（因为这也会删除箭头）。

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;
    }
   

- K Vij