Question

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

因此，当用户单击按钮时，我将显示下拉列表，如下所示。我知道可以创建自定义下拉列表，但尝试使用默认值以获得更好的浏览器支持。

谢谢

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

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

Answer 1

有一个CSS属性可以完全隐藏默认浏览器元素：appearance: none。但是，并非所有浏览器（caniuse）都支持它，您需要添加供应商前缀（-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>

Answer 2

如果按按钮时我理解正确，则将isOpen的值从false更改为true，然后尝试以下语法：

{isOpen && (
    <select>
    <option>Apples</option>
    <option>Oranges</option>
    <option>Banannas</option>
  </select>
    )}

Answer 3

仅供大家参考的仅供参考，我设法通过删除按钮并将样式发送到select组件本身来实现此功能。我通过将不透明度设置为0隐藏了图像的文本，并提供了背景图像，例如-

如果选项为[橙色，苹果，香蕉] -用户第一次看到橙色的图像 -当用户单击选择时，橙色用户将看到以上文本选项->用户单击苹果 -下拉菜单已关闭，所选内容现在具有苹果图像以反映所选内容。

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

3 个答案: