SELECT options disappearing on hover in Firefox?

[harryatkins]

Hi,

Okay so on the contact page of a site I’m working on I have some dropdowns, on every other browser they’re working fine, but in Firefox (spanning across multiple versions) the options which appear when the select is clicked disappear as soon as the mouse hovers over them rendering them useless.
When disconnect my styles file from the html it works fine so it’s definitely in the css. But if I then only comment out the code pointed at the contact form then it still has the problem. So something else in my stylesheet is causing this problem and I can’t for the life of me figure out what it is.

Has anyone else encountered this problem before?
Here’s a link to a GIF of the problem

Any ideas on how I can solve this? No javascript is affecting it, just pure html <select>

[Paulie_D]

We can’t diagnose CSS from an image.

[harryatkins]

Yeah of course. I was more just adding the image in case anyone recognised the problem visually.

Here’s the sass being used on the selects:
select {
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: ”;
appearance: none;
background: url(‘../img/down-arrow.png’) no-repeat #6B6B6B;
background-position: right center;
border: 1px solid #5a5a5a;
box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, 0.2), 1px 1px 1px rgba(255, 255, 255, 0.1);
color: white;
border-radius: 3px;
padding: 7px 5px 7px 10px;
min-width: 65px;
font-family:inherit; font-size:inherit;
}

Apart from that from what I can tell from the inspector there’s nothing else which is effecting them.

[harryatkins]

And demo here: http://dev.harryatkins.me/modernsignal/tellus/7.2/contact.html

[Paulie_D]

Interesting…you can make a selection in FF if the mouse button is still down.

I’m wondering if you need to be adding a click function to the arrow.

BTW…what does this mean? It’s weird.

text-overflow: ”;

[harryatkins]

Yes, you can also move the mouse all around it and it stays open. But as soon as the mouse goes over the options it disappears.
Yes maybe just disable the select default functionality with jquery but in this case what needs to be made visible? How does the form retain it’s function in that case?

Oh and that’s just a not very pretty hack to get rid of the ugly default arrow on Firefox dropdowns. But it still has the same problem without it.

[Paulie_D]

Is there JS involved somewhere?

[harryatkins]

There’s JS doing other stuff on the page but nothing targeting selects, but if I leave that and take the css away the dropdowns work fine again. So I’m pretty sure it’s the CSS.

[Paulie_D]

Then I can only suggest that you disable one line of CSS at a time until you find the right one….but I couldn’t find one that seemed to have any effect.

[Paulie_D]

Quick google search seems to indicate that this is a bug in FF

[harryatkins]

Yes it would appear so, and yet I can get them to work without any styling on the page at all. Weird bug. Thanks for the help

[ikilroy]

I had the same issue – one of the ancestor divs of the offending select had css property:

overflow: auto;
Removing that fixed the select.

Hope this will help anybody with the same problem.

[Author]

Posts