Html "select" position on Firefox?

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/

Post some css styles for a select, or live demo on jsfiddle please — Serhii Holinei, Aug 28 '12 at 09:22
Is that normal you've got `#opening-form-gender` in your HTML, and `#opening-form` in your CSS ? — zessx, Aug 28 '12 at 09:34

score 2 · Accepted Answer · answered Aug 28 '12 at 09:44

2

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.

answered Aug 28 '12 at 09:44

Alfred

21,058
61
167
249

+1. Problem is default select css options. So this is working well. – AliRıza Adıyahşi Aug 28 '12 at 09:46

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

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.

edited May 23 '17 at 12:27

Community

1
1

answered Aug 28 '12 at 09:34

LeBen

1,884
12
21

Yep, so I was wrong, you have to apply the `vertical-align:top` to the inputs: http://jsfiddle.net/HLEcS/1/ – LeBen Aug 28 '12 at 09:45
I cannot vote up to you but very very thank you. Helpful answer. Simple problem, when add vertical-align:top, text show on top. – user1629771 Aug 28 '12 at 09:50

Html "select" position on Firefox?

2 Answers2