Style select dropdown w/o arrow

HTML & CSS
1

this is what I need to do…

http://mayacove.com/dev/select.gif

I have never styled select dropdowns without the arrow…

I searched, found some stuff on SO,


	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;

but this is working only on Chrome, not on FF (and IE I have no idea… ;-o )

this is what it looks like in Chrome:
http://mayacove.com/dev/select_chrome.jpg
ff: http://mayacove.com/dev/select_ff.jpg

thank you very much…

PS: this is from current site,
http://mayacove.com/dev/select_curr.gif
(can’t post url b/c it’s behind a login firewall…)

it looks like there’s a div “on top” of actual select… select has opacity:0 but at the same it’s being styled also…


select { 
    opacity: 0;
}

select.sorter {
	width:180px;
	margin-right:1px;
	height:38px;
}
2

Hi,

The simple fact of the matter is that you cannot style select elements cross browsers to look the same with css alone. It’s just not possible (yet) to change the appearance much or add custom images. You would need a JS/Jquery solution to do that where the select element is swapped out of the html and replaced with a css dropdown and values swapped between the two with js.

Here are some common scripts.

http://ivaynberg.github.io/select2/
http://v2.easy-designs.net/articles/replaceSelect/

There is a css trick you can use and make the dropdown wider than you need and then cut off the overflow so you can’t see the default arrow. You can then overlay a custom arrow image over the select. The seelect wil still work as it works on any part of the visible section and not just the arrow.

The drawbacks is that you can’t control the option width which will be wider and in IE the current item stays highlighted blue and spoils the effect a little.

Here’s a link to an article that explains that method.

3

thank you very much… oh man… I get this last-min job that I needed badly… and come across this highly stylized dropdown request… something I confess I have never done before…;-o

thank you for all the links you posted… I also found this jQuery select dropdown plugin that looks very cool…
https://code.google.com/p/select-box/
maybe I’ll give this a try…
since jQuery is really good with cross-browser, I hope it’ll work in IE as well as in the sane browsers…:wink:

thank you very much, Paul… I appreciate all your help…