Reputation: 331
I am just wondering why the Zurb Foundation's select input works fine on their website:
foundation forms
And when I copy the excact code from their example and put on my website - there occurs a 'second arrow issue' on firefox:
The question is what would be the best fix for that issue.
I use:
select {
background-image: none;
}
I am not sure if it is the best way to work around that, of course remembering to apply that code only for firefox.
Any ideas how to fix the problem without any 'hacks'?
Upvotes: 1
Views: 844
Reputation: 187
For me worked:
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
It is a fix for other browsers too.
Upvotes: 3
Reputation: 583
Im using Firefox 26.0 and the select arrow doesn't show at all, just the standard dropdown arrow box.
Here is my solution to the issue:
@-moz-document url-prefix() {
select {
background-image: url(data:image/svg+xml;
base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
background-position: 100% center;
background-repeat: no-repeat;
padding: 0.5rem;
text-indent: 0.01px;
text-overflow: '';
}
}
Working example: JSFIDDLE
Upvotes: 0
Reputation: 5468
It's seems to be a Firefox bug for version 30.0 and up on certain device. Unfortunately I have no work around... other than removing the arrow on the select box.
Upvotes: 3