CODEWITHSUNDEEP
htmlcsszurb-foundation
knapcio
knapcio

Reputation: 331

Zurb foundation select input - 2 arrows issue

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:
enter image description here
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

Answers (3)

ann
ann

Reputation: 187

For me worked:

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

It is a fix for other browsers too.

Upvotes: 3

Charles Butler
Charles Butler

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

Papouche Guinslyzinho
Papouche Guinslyzinho

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

Related Questions