CSS：如何从下拉菜单中舍入选择框？

问题描述

我对 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>

解决方法

tl;dr：你做不到。

此框由操作系统管理。 如果要设置选项的样式，则需要编写自己的 html 或使用第三方组件。

,

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