Html "select" position on Firefox? - html

Question

I've got a select in my site. With the following:
...
<select name="opening-form-gender" id="opening-form-gender">
<option value="f">Female</option>
<option value="e">Male</option>
</select>
...
CSS:
#opening-form {
background-image: url('../img/opening-form-bg.png');
background-repeat: no-repeat;
height: 139px;
margin: 40px auto;
padding: 20px;
}
#opening-form p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color:#666666;
}
#opening-form strong {
font-size:20px;
}
#opening-form .submit {
background-image: url('../img/red-submit.png');
border: none;
width: 115px;
height: 31px;
line-height: 28px;
}
#opening-form .submit:hover {
background-image: url('../img/red-submit-hover.png');
}
So, its have a style problem. How can i fix it?
This is jsfiddle page:
http://jsfiddle.net/HLEcS/

Answer 1

Try something like;
select{
width: 175px;
border: 1px solid #e7e7e7;
background-image: url('../img/input-bg.png');
font-weight: regular;
font-size:12px;
color: #666666;
padding: 7px;
}
Here is the modified fiddle.

Answer 2

On WebKit (Chrome, Safari), you can disable the native style and customize it with your own by applying the property:
-webkit-appearance: none;
Unfortunately, this doesn't work in Gecko (Firefox). See https://bugzilla.mozilla.org/show_bug.cgi?id=649849
The dotted border on Firefox is caused by the default property outline. See How to remove Firefox's dotted outline on BUTTONS as well as links?
The alignement should be fixed by applying a vertical-align: top to the parent. Please provide the full HTML or a Fiddle to test.