0

我有 IE 和 Firefox 的问题。我相信我想要达到的效果只适用于 chrome。问题是它在 chrome 中完美地显示了下拉菜单，如下图所示：正确的下拉菜单

并在 Firefox / ie 中以这种方式显示它： 在此处输入图像描述

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

这是一个代码：

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

我确信有一个简单的解决方案可以解决它，但我尝试了几件事，但没有任何效果。先感谢您。

4

3 回答 3

1

仅使用CSS进行这种跨浏览器是非常困难的（如果不是不可能的话）。我能想到的唯一给你的元素设置样式的方法就是模拟它。首先，插入一个具有选定值的隐藏文本。这是一个模拟 dropdown-元素的示例 HTML ：<select>inputselect

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

我希望这对你有任何帮助！

于 2012-08-15T11:31:50.837 回答
1

看看Style a Select Box Using Only CSS

于 2012-08-15T10:53:52.703 回答
1

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

我试图通过使用父节点上的伪元素（在本例中为标签元素）来用自定义按钮覆盖下拉按钮。CSS 属性 pointer-events 确保您仍然可以单击粉红色按钮来打开选择控件。

于 2012-08-15T11:02:07.970 回答