CSS：如何从下拉菜单中舍入选择框？ [复制]答案

【问题标题】：CSS: How can I round the select box from a drop-down-menu? [duplicate]CSS：如何从下拉菜单中舍入选择框？ [复制]
【发布时间】：2021-01-26 18:54:00
【问题描述】：

我对 HTML 和 CSS 很陌生，但在这个问题上找不到任何东西或几乎没有任何东西。我有一个下拉菜单，它已经有圆角。但是如何让选项出现在圆角框中？

（这个方框应该是圆角的）

select{
  width: 285px;
  height: 40px;
  margin-top: 20px;
  border-color: purple;
  cursor: pointer;
  border-radius: 20px;
 }

<div>
  <select name="color" class="selectBox" id="color">
    <option value="" disabled hidden selected>select color</option>
    <option value="red"> red </option>
    <option value="blue"> blue </option>
    <option value="green"> green </option>
    <option value="yellow"> yellow </option>
  </select>
</div>

【问题讨论】：

我建议你阅读这个问题：stackoverflow.com/questions/8927974/…
您要对选项标签进行四舍五入吗？
来自 link 的演示 3 有点像圆形菜单，如果您正在寻找的话。
@s.kuznetsov 是的
看一下，请 - select2.org/options

标签： html css

【解决方案1】：

tl;dr：你不能这样做。

此框由操作系统管理。如果要对选项进行样式化，需要自己编写html或者使用第三方组件。

【讨论】：

好的，这也解释了为什么我找不到这么多相关信息

【解决方案2】：

下拉列表由用户操作系统控制，因此这些元素的完整样式是不可能的。您可以通过使用 HTML <li> 元素并在其中添加 JS 以创建下拉列表并添加几个基本的过渡效果来实现类似的效果。

【讨论】：