圆角导致 IOS 设备上的选择框出现样式问题答案

【问题标题】：Rounded corners causing styling issue for select box on IOS devices圆角导致 IOS 设备上的选择框出现样式问题
【发布时间】：2018-05-15 13:53:00
【问题描述】：

我在我们的 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>

【问题讨论】：

iOS 是指 iOS 或 Safari 上的 chrome？
@Alex，我确实包含了 html 和 css...
tinyurl.com/y93x79hq 这里是指向内容右上角排序选项的类别的链接。
我看到 atm 的唯一解决方案是设置 -webkit-appearance: none 并按图像添加框箭头：stackoverflow.com/questions/5780109/…

标签： ios css iphone select

【解决方案1】：

iOS 设备似乎不支持超过 10 像素的边框半径。因此，您可以将所有设备的边框半径设置为 10 像素，也可以将 Safari 定位在 ios 设备上，如下所示：

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

【讨论】：