Question

这可能是一个奇怪的请求，但我喜欢精选控件的简洁以显示一些数据，但我不希望这个人能够选择任何东西，甚至在他们遍历每个项目时都会突出显示。我只需要它是只读的。

当我在select上设置readonly标志时，它给了我这个带有一条直线图标的圆圈（不想要那个），它仍然突出显示选项，因为我将鼠标悬停在它们上面（不想那样），当我点击一个选项，它关闭了选择，但再次点击它不再显示列表（它什么也没显示）。

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中运行良好，但尚未测试所有浏览器。看起来像hover还在firefox上。

选择无法选择且无突出显示的控件

1 个答案: