Would be grateful if anyone tell me a js and css code to make a select element on a form that select element has rounded cornered borders and its background has different color and its drop down list background and borders has different colors and also the arrow of this select element is an image arrow. Cheers.
Styling the SELECT tag is not only nearly impossible, but its not advisable from a UI point of view. Users have been conditioned for SELECT drop down to look a certain way, and if you change that… no matter how pretty you make it, it wont be something they recognize as functional.
You can change the basic stile such as BG, and text color of the DISPLAYED( selected) text inside the SELECT box, but not of the popup menu. ( see above)
I hope you take that into consideration.
That beign said, you can use vendor specific properties (-o, -moz,-webkit, am not sure if MS supports this at all) and set SELECT {appearance: none; display:block;} . SO far as I have tested this doesnt kill the functionality ( and of course you still CANT style the popup) but allows you to style the SELECT just like any other HTML tag. Still I’d advice against it.