单击透明选择don't work on firefox
单击透明选择don't work on firefox
提问于 2012-09-02 04:42:42
我正在尝试摆脱默认的选择，以使用更符合我的网站风格的东西。
我创建了一个<button>来包装select。给它不透明度:0和绝对位置和大小，使它适合按钮。通过一些jquery，我使active选项在<span>中也显示为按钮的文本。看起来很不错。
问题是在chrome和safari上运行得很好，而在firefox上却不是这样！
webkit会听到点击选择的声音，即使它看不见，但moz看不到(对IE和opera很好奇)。我真的不知道该怎么解决这个问题。
这里有一个问题的复制品：http://jsfiddle.net/bakaburg1/YyvRf/2/
欢迎任何帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-09-02 04:55:49
您可以使用<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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12231237
复制相关文章
相似问题
腾讯云开发者
