I am currently working on some front end stuff and needed to be able to style a select / drop down box using only CSS. Sure, there are drop down jQuery plugins, but I needed it to be as smooth and easy as possible.
That’s where this post by c.bavota comes in. Basically it works by forcing the actual arrow that is OS specific and unable to be styled to be rendered outside of the parent DIV element, which is hit with an overflow: hidden and allows the parent div’s background to be rendered.
Seems to work in all browsers except IE7 (we dare not even speak of the browser that should not be named). Although you will need to apply the additional to your select element in order to get it to work in Webkit browsers:
select {
-webkit-appearance: none;
height: 25px; /* Can be whatever height you want */
}
Slightly hacky but works perfectly for me. Check it out: Style Select Box Using Only CSS
