边框半径在 MacOS/-webkit- 中不起作用

Question

我正在对表单输入进行一些圆角处理，发现边框半径不适用于<select>。它适用于所有其他输入字段，但不适用于选择下拉菜单。当我拿起我的 Macbook Pro 时，我才注意到这一点，但我不记得在我的 Windows 机器上看到过这个问题。这是 OSX/浏览器的问题吗？

我制作了一个 codepen 来在我的环境之外对其进行测试，果然如此！那里也不行！

看看codepen

HTML：

<select class="form-control">
    <option value="">Select User</option>
</select>
<input type="text" class="form-control">

CSS：

.form-control{
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
    border: 2px solid #bbb;
}

如果是 Mac OS/浏览器组合问题，是否有解决方法？

更新：

Safari 可以，但 Chrome 或 Safari 不行

Answer 1

Here's an example jsfiddle 使用您的代码和来自this post 的第三个答案：

<div class="form-control">
  <div class="form-control rounded">
    <select class="form-select">
        <option value="">Select User</option>
    </select>
  </div>
  <div class="form-control">
    <input type="text" class="rounded">
  </div>
</div>

CSS：

.form-control {
    display:inline;
    overflow:hidden;
}

.form-select {
  border:0px;
  outline:none;
}

.rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
    border: 2px solid #bbb;
}