Question

我想知道为什么我们不能单独使用CSS来设置选择菜单（不是下拉菜单），就像我们可以设置按钮或复选框一样。我遇到过很多样式的文章，但他们使用Javascript manily模仿select方法中的<ul>...<li>行为。我尝试过，但我所能做的只是设置select而不是option.

我正在寻找一种CSS方法。问候。

Answer 1

我想知道为什么我们不能选择

HTML 4.01（或者是CSS 2.1？）让用户代理按照自己的方式设置表单元素。因此几乎没有标准化，当你在WebKit的bugzilla中提交了一个bug（大多数）时，答案就像是“告诉我在我的渲染引擎中哪些部分的建议很容易实现。没有？好的WONTFIX KTHXBYE ”。
公平地说，3个供应商有3个操作系统和3个UI需要考虑，Apple有2个，现在有1个，第5个有更重要的问题需要解决。

以下是2007年的最新技术：Styling form controls with CSS, revisited（R. Johansson）。至于WebKit可能会惹恼我，我不会后悔时间！（除了Safari 2：“我们无能为力”是客户容易理解的答案，比“是但不是一切......这个和那个等”更容易理解）

所以在WebKit中没有填充，如果你真的需要一个非常自定义的外观，而不是去自定义列表和WAI ARIA来模仿原生元素。

编辑：这篇文章是一个非常好的总结： The Problem Of CSS Form Elements （Smashing Magazine，Gabriele Romanato）

MDN article似乎过时了。我将不得不做进一步的测试，但传说可以在IE8 +中浮动。但是，对于IE7和IE6来说，这是真的。绝对定位（和已知宽度）是在这些浏览器中定位它的唯一方法。

Answer 2

简而言之，您将找不到跨浏览器的CSS-only方法，因为一个方法不存在。

一个不存在的原因，以及为什么select控件与其他HTML元素不同，是因为它们（和其他表单控件）是OS级元素。也就是说，浏览器将其留给操作系统来确定元素的样式。这部分是因为每个操作系统都有自己的表单样式，标准组选择在平台基础上保持一致（使用户可以将其识别为表单）。因此，控件实际上可以使用的CSS很少（如果有的话），更不用说任何实际上是跨浏览器的了。

换句话说，如果你想在基本的文本大小和颜色，边距或填充中使用几乎任何形式的输入元素，你就会遇到你已经找到的JavaScript方法。

Answer 3

<style name='abc'>
<option name='a' style='color: red; background-color: #fff;'>Hello</option>
</style>

通过这种方式，您可以为样式标记添加更多样式属性。

Answer 4

您可以为此样式标记添加css的各种属性。

仅使用CSS / CSS3 </select>样式化<select>菜单

4 个答案: