This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others. In Internet Explorer, the select lists are unstyled, but the checkboxes and radio buttons still look and function beautifully. So go ahead, CSS form styling is this easy:
How does it work?
class="styled"on it; hides the real form element; sticks a
spantag with a CSS class on it next to the element; and, finally, mouse events are added to the
spanthat handles the visual stages form inputs go through when they are clicked.
heightproperty should be one fourth of the height of the full size images. You also might have to change the
.selectselector. You probably won't have to edit any other portions of the CSS, but regardless, this part is still straight forward.