Dropdown arrow appears when it shouldn't - html

Question

I have a problem with IE & firefox. I believe the effect I wanted to achieve works only on chrome.
The problem is that it displays the dropdown perfectly in chrome like on this picture below:
and in firefox / ie it displays it in this way:
So, basically it keeps the default dropdown arrow.
here is a code:
<select name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
and 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;
I'm sure there is a simple solution to sort it out, but i tried couple of things and nothing was working.
Thank you in advance.

Answer 1

Take a look at Style a Select Box Using Only CSS

Answer 2

Look here: http://result.dabblet.com/gist/3358882/5eeb2b8d4fe6adf243c5c463111d367c7651a029
I have tried to overlay the dropdown button with a custom one by using the after-pseudo-element on the parent node (a label-element in this case). The CSS property pointer-events makes sure that you can still click on the pink button to open the select-control.

Answer 3

Doing this cross-browser using CSS only is real hard (if not impossible) to do. The only way I can think of to style your <select> element is to simulate it. First, insert a hidden text input that'll have the selected value. Here's an example HTML that simulates a dropdown-select element:
<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>
Let's style it:
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;
}
Some 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");
});
Put them all together, you get this: jsFiddle.
I hope that helped you in any manner!