我在表单输入上弄弯了一些角，发现border-radius不适用于<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不好
这是一个使用您的代码和这篇文章的第三个答案的示例jsfiddle：
<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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句