Question

下拉箭头出现，但不应出现

2012-08-15

549

html css dropdownbox

我在使用 IE 和 Firefox 时遇到问题。我相信我想要实现的效果只在 Chrome 上有效。问题是它在 Chrome 中完美显示下拉菜单，如下图所示： correct dropdown

而在 Firefox / IE 中，它以这种方式显示它： enter image description here

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

这里有一个代码：

      <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

查看仅使用 CSS 设置选择框的样式

MortenRøgenes

2012-08-15

Answer 2

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

我尝试使用父节点（本例中为标签元素）上的 after-pseudo-element 将下拉按钮与自定义按钮叠加。CSS 属性 pointer-events 确保您仍可以单击粉色按钮来打开选择控件。

Answer 3

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

<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 。

我希望这对您有所帮助！