CSS problem in FireFox WordPress

• SOLVED

This is a follow up to my last question, which you can see here:

[[LINK href="http://www.wpquestions.com/question/showChronoLoggedIn/id/7944"]]http://www.wpquestions.com/question/showChronoLoggedIn/id/7944[[/LINK]]

I ended up using the solution here:

http://bavotasan.com/2011/style-select-box-using-only-css/

On a Mac, this looks great in Chrome, but the underlying arrow becomes visible in FireFox. See screenshot.

I had to shrink the select box. I am now using this CSS:


#sub-lead-announcement select {
background: transparent;
width: 110px;
padding: 5px;
font-size: 11px;
line-height: 12px;
border: 0;
border-radius: 0;
height: 24px;
-webkit-appearance: none;
}
#sub-lead-announcement {
width: 100px;
height: 24px;
overflow: hidden;
background: url('/img/down_arrow_select.jpg') no-repeat right #ddd;
border: 1px solid #ccc;
}

How do I get this to look good in all browsers?

This screenshot is from FireFox, where the underlying down arrow is visible, which is very ugly. In Chrome it is covered by the icon I am using, which is much more pretty.

Answers (2)

2013-02-01

Kiet Luong answers:

try to change width value of select box to 128px or more

---

Kiet Luong comments:

you need to increase the width of the select box to push the down arrow to the right, and you will hide it away

---

Kiet Luong comments:

remember change width of <select> tag only

2013-02-01

Arnav Joy answers:

try this

#sub-lead-announcement select {

background: transparent;

width: 130px !important;

padding: 5px;

font-size: 11px;

line-height: 12px;

border: 0;

border-radius: 0;

height: 24px;

-webkit-appearance: none;

}

#sub-lead-announcement {

width: 100px;

height: 24px;

overflow: hidden !important;

background: url('/img/down_arrow_select.jpg') no-repeat right #ddd;

border: 1px solid #ccc;

}