HTML / CSS - 设置选择菜单样式 [英] HTML/CSS - Setting Select Menu Style

问题描述

我正在为一个网站使用多个下拉菜单。在Chrome和Safari中，菜单呈现良好。但在firefox中，下拉箭头位于菜单中间。

---

编辑
这里是图片。

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

这是目前在Firefox和IE中执行的操作：

如何解决此问题？

c>选择元素是屁股的皇家痛。我建议不要使用选择元素，而是使用单选按钮 + labels + JavaScript 来模拟select元素。

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

标记可能如下所示：

 < ul class =select-replace> 
< li> 
< input type =radioid =option1name =selectElementNamevalue =value 1/> 
< label for =option1>值1< / label> 
< / li> 
 ... 
< / ul> 
  

只是为了表明我没有充满这里有一个 jsfiddle的纯HTML + CSS 选择样式元素而不使用选择元素。这是一个3分钟的黑客工作，JavaScript会使它在Internet Exploder更清洁/工作。

I'm using several dropdown menus for a site I'm working on. In Chrome and Safari the menus render fine. But in firefox, the dropdown arrow is placed in the middle of the menu.

---

EDIT Here's pictures.

This is what it should look like in all browsers. (It's only like this in Chrome.)

This is what it's currently doing in Firefox and IE:

How can I fix this?

解决方案

Styling a select element is a royal pain in the butt. I would suggest not using a select element, and instead use radio buttons + labels + JavaScript to emulate a select element. It will give you more control over the styling, and still maintain accessibility (if done correctly).

I believe there is a jQuery plugin to do this (I know you didn't tag JavaScript or jQuery).

The markup could look something like this:

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

And just to show that I'm not full of it here's a jsfiddle of a pure HTML+CSS select style element without actually using a select element. It's a 3 minute hack-job, and JavaScript would make it much cleaner/work in Internet Exploder.

这篇关于HTML / CSS - 设置选择菜单样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！