Question

我有一个select元素，里面有多个option。我还有一个datalist充满option s的文字输入。

令人抓狂的是，如果我设置option { font-size: 14pt }，它会调整option下拉列表中的所有select，但 none option下拉列表中的input type='text'。它们是所有option元素，我无法在我的书籍或Google上找到为什么这种风格只适用于其中一些。

选择 option也没有格式。当它出现在下拉列表中时，它会被设置为样式。但如果它作为当前选择的元素，它就不是。同样，它始终是option元素，那么为什么这种风格不适用于它？

Answer 1

这是不可能的。我根本不使用select元素。您可以改为使用只读输入文本框进行显示，并隐藏<ul>列表，直到文本框被聚焦为止，每个<li>在点击时更新文本框的值。

Answer 2

不可能做你想要达到的目标。您可以在某种程度上设置选择框的样式，但不能选择选项。

要设置选择框的样式，您需要使用外观属性删除默认样式，然后应用您的css：

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: red;
   font-size: 16px;
}

如果你真的需要样式选项，你必须创建一个带有其他html元素的虚假选择元素。例如包含列表项而不是选项的列表：

<ul>
  <li></li>
</ul>

这同样适用于数据清单。

不使用默认表单元素（即创建虚假元素）只是为了适应设计可能会影响可访问性。最重要的是减轻利弊。

如果无法获得可访问性，请选择黄金！

如何在select元素中设置所选元素的样式？

2 个答案: