下拉箭頭出現時，它不應該

Question

我有一個IE瀏覽器& Firefox的問題。我相信我想實現的效果只能用於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

我以父節點上的後僞元素（標籤元素試圖用一個自定義疊加下拉按鈕在這種情況下）。 CSS屬性指針事件確保您仍然可以單擊粉紅色按鈕打開選擇控件。

Answer 3

這樣做跨瀏覽器使用CSS只有真正困難（如果不是不可能的話）才能做到。我可以想到的唯一方法就是模擬<select>元素。首先，插入一個隱藏文字input，它將具有選定的值。下面是模擬dropdown- 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 。

我希望能以任何方式幫助你！