CSS - Rounded Select, Checkbox and Radiobutton

Question

Is there any way, how to make rounded HTML <select>, without using any javascript? I have this insane design and I have absolutely no idea how to do it only with CSS.

The same problem is with checkbox and radiobutton. Does anybody know how to make them rounded?

I need solution that works for IE6+, Firefox 2+, Opera 9+ ...

alt text http://uploader.chytry.cz/select-checkbox.png

Answer 1

No. Form styling is very problematic, there are no guarantees that any styling will work. Simple borders and background colours/images generally work OK in most browsers. I believe Safari will let you style very little. Check this page for more detailed info.

Honestly, the best solution is to use javascript. jQuery click menu is a great solution I used recently to mimic a select box (used JS to set a value on a hidden field when an element in the menu was selected).

I'm sure there are other solutions around too if you search.

Answer 2

No.

Now the long answer: Internet Explorer does not lend itself well to being styled. You will be able to set a background image for the left-hand side (the text content) that has rounded corners, but the drop-down arrow will be fixed as the default browser. You'll also find that the mousedown and mouseover states for the control will be fixed as the default style.

I think that in many cases, the ideal preferred design needs to be a little pragmatic about limitations in browser standards support. Specifically, the problem that IE6 doesn't support a fair number and IE7 is only slightly more compliant.

Sorry for the bad news.