css - 单击透明选择不适用于 Firefox

Question

我正在尝试摆脱默认选择，以使用更符合我网站风格的内容。

我创建了一个 <button>包装选择。给它不透明度:0 和绝对定位和大小以使其适合按钮。我使用一些 jquery 使事件选项也显示为按钮的文本，在 <span> 中。 .看起来还不错。

问题是在 chrome 和 safari 上运行完美，在 firefox 上却完全不行!

webkit 会监听选择上的点击，即使它不可见，moz 不会(对 IE 和 Opera 非常好奇)。我真的不知道如何解决这个...

这里是问题重现的 fiddle : http://jsfiddle.net/bakaburg1/YyvRf/2/

欢迎任何帮助。

Answer 1

您可以使用 <div>而不是 <button>

HTML:

<div class="btn btn-small select-container">
    <select>
        <option>title</option>
        <option>date</option>
        <option>author</option>
    </select>
</div>

CSS:

.btn.btn-small{
  padding-bottom: 2px;
  padding-top: 2px;
  color: #737373;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  font-size: 14px !important;
  font-variant: small-caps;
  font-weight: bold;
}

.btn.select-container {
  position: relative;
  padding-right: 24px;
}

.btn.select-container select {
  position: absolute;
  top: -1px;
  left: 0;
  height: 117%;
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: 1000;
}

select.btn {
  width: initial;
  height: 23px;
  padding-right: 20px;
  -webkit-appearance: none;
}

select.btn:focus {
  outline: none;
}

.select-container {
  position: relative;
}

在这里查看:http://jsfiddle.net/YyvRf/3/