Question

How do I style width for -webkit only? All of my select boxes are roughly 16px wider no matter what I do. Border-box has zero effect and this is really annoying. I’ve even tried making up vendor prefixes hoping against common sense that it would work like -webkit-width. Of course, that didn’t work out too well.

Also, how do you get the arrow only using -webkit-appearance: none? It’s very annoying having to fight off the rounded corners and extra styling webkit gives you by default. Is the only sane browser FF?

Answer 1

So for the width I just thought of the solution immediately after typing this.

@media only screen and (-webkit-min-device-pixel-ratio:0) { 
    select { width: 25%; }
}

That targets just the -webkit browsers and I should have known that already.

So as for the arrow…