javascript - 如何在不呈现克拉和标签名称的情况下呈现 <select> 标签

Question

我正在尝试呈现一个按钮，该按钮在单击时呈现下拉列表，但我不想呈现克拉和默认呈现的选定标签。是否可以覆盖此功能并仅显示按钮但在其下方具有选择功能？

因此，当用户点击按钮时，我会呈现如下所示的下拉菜单。我知道创建自定义下拉列表是可能的，但尝试使用默认设置以获得更好的浏览器支持。

谢谢

  </button>
      {isOpen ?
        <select>
        <option>Apples</option>
        <option>Oranges</option>
        <option>Banannas</option>
      </select>
        : null}
    </div>

我有打开和关闭它的逻辑。如果你看到这个w3schools.com/tags/tryit.asp?filename=tryhtml_select你看到显示了 carat 和 volvo，我想用我制作的按钮替换它，但仍然具有相同的基础功能。因此，在向用户显示时基本上隐藏了克拉和标签。

Answer 1

有一个 CSS 属性正好可以隐藏默认的浏览器元素:appearance: none。但是，并非所有浏览器都支持它 (caniuse)，您需要添加 vendor 前缀(-webkit- 和 -moz-)。

这是一个例子:

.select-2 {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(0, 0, 0, 0.1);
  border: 0;
  padding: 4px 7px;
}

<select class="select-1">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select-2">
  <option>Option 3</option>
  <option>Option 4</option>
</select>