HTML/CSS - 设置选择菜单样式答案

【问题标题】：HTML/CSS - Setting Select Menu StyleHTML/CSS - 设置选择菜单样式
【发布时间】：2011-05-20 03:38:18
【问题描述】：

我正在为我正在开发的网站使用多个下拉菜单。在 Chrome 和 Safari 中，菜单呈现良好。但是在firefox中，下拉箭头是放在菜单中间的。

编辑这是图片。

这是它在所有浏览器中的样子。（只有在 Chrome 中是这样的。）

这是它目前在 Firefox 和 IE 中所做的：

我该如何解决这个问题？

【问题讨论】：

请发布您的html/css和screengrab
我认为你需要调出你的代码。或您的网址。

标签： html css select drop-down-menu

【解决方案1】：

尽量使用背景位置：右中；在 CSS 中。这可能会有所帮助

【讨论】：

【解决方案2】：

为select 元素设计样式是一件令人头疼的事情。我建议不使用select 元素，而是使用radio buttons + labels + JavaScript 来模拟选择元素。它可以让您更好地控制样式，并且仍然保持可访问性（如果操作正确）。

我相信有一个 jQuery 插件可以做到这一点（我知道你没有标记 JavaScript 或 jQuery）。

标记可能如下所示：

<ul class="select-replacement">
  <li>
    <input type="radio" id="option1" name="selectElementName" value="value 1" />
    <label for="option1">Value 1</label>
  </li>
  ...
</ul>

为了表明我对它的不满，这里有一个jsfiddle of a pure HTML+CSS select style element without actually using a select element。这是一个 3 分钟的 hack 工作，而 JavaScript 会让它在 Internet Exploder 中更干净/工作。

【讨论】：