Firefox dropdown arrows when border is 0px on each element and 1px on select

Question

I have a weird problem with firefox with the following css :

* {
    margin: 0;
    padding: 0;
    border: 0;
}

select {
    border: 1px solid #A3A3A3;
}

In chrome this behaves correctly :

all options on chrome correct

But in Firefox I get this :

all options on chrome not correct

When I remove the "border: 0" and "border: 1px solid #A3A3A3;" properties, it works fine :

all options firefox correct

Any suggestion on how to get the same display on chrome and firefox ? Thanks

take a look here http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select#answer-18327666 — Sven Delueg, May 03 '14 at 09:30
I've already checked this one. I don't want to remove arrows, I just want to display them like in the screenshot, with a padding between the text and the arrows — Christos Loupassakis, May 03 '14 at 09:31
A good read: [The Problem Of CSS Form Elements](http://www.smashingmagazine.com/2013/02/27/css-form-elements-problem/) — Ayman Safadi, May 03 '14 at 09:54
Thank you for the links, interesting reading by the way. Unfortunately, they do not resolve the problem. I ended up using a workaround (see my answer). — Christos Loupassakis, May 08 '14 at 09:41

score 0 · Answer 1 · answered May 03 '14 at 09:32

0

every browser have it's own css, we have to set some css according to browser you can use

-moz-appearance: none;

for this

answered May 03 '14 at 09:32

Ankit Agrawal

6,034
6
25
49

score 0 · Answer 2 · answered May 08 '14 at 09:45

I ended up doing this :

* {
    margin: 0;
    padding: 0;
}

And removed this property :

select {
    border: 1px solid #A3A3A3;
}

By doing this, each element has it's border handled by the browser. If I don't need a border for an element, I simply put "border: none" in it's properties.

The question is still open as this solution doesn't really resolve the original problem.

Firefox dropdown arrows when border is 0px on each element and 1px on select

2 Answers2