如何设置html“选择”元素的选项位置样式？

Question

我使用以下代码初始化选择：

select {
  border: none;
}

<select>
  <option>Select a product</option>
  <option>Product 1</option>
  <option>Product 2</option>
  <option>Product 3</option>
</select>

但是我想这样改变期权的位置：

我该怎么做？感谢您的帮助。

Answer 1

原生select无法实现。
您可以在MDN - Why is styling form widgets challenging?, The Ugly上详细了解它。

您可以先隐藏option，但用户将无法再选择它。

select option:first-child {
  display: none;
}

<select>
  <option selected>Select a product</option>
  <option>Product 1</option>
  <option>Product 2</option>
  <option>Product 3</option>
</select>