Select arrow style change

css select
user1802439 picture user1802439 · Jan 8, 2013 · Viewed 540.2k times · Source

I'm trying to replace the arrow of a select with a picture of my own. I'm including the select in a div with the same size, I set the background of the select as transparent and I'm including a picture(with the same size as the arrow) in the right top corner of the div as background.

It only works in Chrome.

enter image description here

How can I make it work in Firefox and IE9 where I'm getting this:

enter image description here

Answer

Morpheus picture Morpheus · Jan 8, 2013

Have you tried something like this:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Haven't tested, but should work.

EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)

There is a workaround here, take a look at jsfiddle on that post.

Related questions

problem with <select> and :after with CSS in WebKit

I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML: <select name=""> <option value="">Test</option> &…

Read More
Removing rounded corners from a <select> element in Chrome/Webkit

The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a <select> element. I've tried getting rid of this by applying a radius of 0px through my external stylesheet, as well inline on …

Read More
I want to vertical-align text in select box

I want to vertically align the text in select box. I tried using select{ verticle-align:middle; } however it does not work in any browsers. Chrome seems to align the text in select box to the center as a default. FF …

Read More