不应该出现下拉箭头

Question

我对IE＆amp;有问题Firefox浏览器。我相信我想要实现的效果仅适用于chrome。 问题是，它在Chrome中完美显示下拉列表，如下图所示：

并在firefox /即以这种方式显示它：

所以，基本上它保留了默认的下拉箭头。

这是一个代码：

      <select name="gender">
       <option value="">Gender</option>
       <option value="male">Male</option>
       <option value="female">Female</option>
      </select>  

和css：

input {
height: 67px;
width: 400px;
border:none;
background:url(../_images/butt-reg.png) no-repeat;
padding: 0 20px;
margin: 0 10px 20px 10px;
text-align:left;
vertical-align: middle;
font-size: 18pt;
color: #666; 

我确信有一个简单的解决方案可以解决它，但我尝试了几件事，没有任何工作。 提前谢谢。

Answer 1

查看Style a Select Box Using Only CSS

Answer 2

请看这里：http://result.dabblet.com/gist/3358882/5eeb2b8d4fe6adf243c5c463111d367c7651a029

我尝试使用父节点上的after-pseudo-element（在本例中为label-element）使用自定义按钮覆盖下拉按钮。 CSS属性指针事件确保您仍然可以单击粉红色按钮以打开选择控件。

Answer 3

仅使用 CSS 执行此跨浏览器非常困难（如果不是不可能）。我可以想到设置<select>元素样式的唯一方法是模拟它。首先，插入一个隐藏文本input，它将具有所选值。这是一个模拟下拉列表的示例HTML - select元素：

<div class = "select">
    <div class = "curVal">Gender</div><div class = "arrow">V</div>
    <div class = "choices">
        <div class = "choice">Male</div>
        <div class = "choice">Female</div>
        <div class = "choice">Refuse to answer</div>
    </div>
</div>

让我们设计风格：

body {
    font-family: 'Arial', Helvetica, Sans-Serif;        
}
.select div {
    display: inline-block;
}
.curVal {
    height: 30px;
    width: 150px;
    line-height: 30px;
    vertical-align: middle;
    background-color: rgb(0, 162, 232);
    color: white;
}
.arrow {
    color: white;
    background-color: rgb(0, 140, 200); /* this can be an image */
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    position: absolute;
    top: 0px;
}
.choices {
    position: absolute;
    left: 0px;
    top: 30px;
    background-color: rgb(255, 127, 39);
    color: white;
    padding: 3px 3px 3px 3px;
    width: 150px;
}
.choices div {
    display: block;
    cursor: pointer;        
}

一些jQuery：

$(document).ready()(function(){
    $(".choices").hide();
});
$(".arrow").click(function(event) {
   $(".choices").slideToggle("fast");
   event.stopPropagation();
});
$(".choice").click(function() {
   $(".curVal").html($(this).html());
   $(".choices").slideToggle("fast");
   event.stopPropagation();
});
$("html").click(function() {
   $(".choices").slideUp("fast");
});

将它们放在一起，你得到这个：jsFiddle。

我希望以任何方式帮助你！