html - 选择无法选中且不高亮的控件

Question

这可能是一个奇怪的请求，但我喜欢选择控件的简洁性来显示一些数据，但我不希望人们能够选择任何东西，甚至在他们浏览每个元素时突出显示。我只需要它是只读的。

当我在选择上设置只读标志时，它会给我这个带有一条线的圆圈图标(不想要那个)，当我将鼠标悬停在它们上面时它仍然突出显示选项(不想要那个)，并且当我单击一个选项，它关闭了选择，但再次单击它不再显示列表(它什么都不显示)。

Answer 1

您可以将选项设置为 disabled 并使用 CSS 来改变它们的显示方式。 disabled 将阻止悬停和选择。 selected 的选项将指示将显示为第一个选项的内容。

<select id="select" name="pets">
  <option value="1" disabled="disabled" selected>Options</option>
  <option value="2" disabled="disabled">Dogs</option>
  <option value="3" disabled="disabled">Fish</option>
  <option value="4" disabled="disabled">Snakes</option>
</select>

CSS

select option:disabled {
  color: blue;
  background: rgba(0, 0, 0, 0.3);
}

JSFiddle:https://jsfiddle.net/47w37u2r/3/

我在 chrome 中运行良好，但没有测试所有浏览器。看起来悬停在 Firefox 上仍然存在。