Styling form elements (select, checkbox, radio, etc)?

Question

Styling form elements using css can be problematic since every browser render tag in different way (just like when safari render checkbox).

Okay lets ignore safari for a while, skinning input and button are rather easy but how to completely skin select, checkbox, radio, etc.

See this pages:
Checkbox skinning
Select skinning
Radio skinning

I've heard some JS framework such as EXTJS or MooTools can do that, but i don't want a large scale framework solution, just independent JS and we can modify the skin as we like, please no JQuery solution, since i don't use it.

Any idea to do that without using some specific framework?

Answer 1

If you want complete control, then you generally have to replace the browser controls completely and fake them with other elements, stylesheets and scripting.

If you don't want to use a framework, then it basically comes down to DIY.

That said, the whole concept have a couple of problems.

1. Trying to get the controls to behave how the user expects (given input from clicking, double clicking, triple clicking, right clicking, dragging, arrow keys, the control key, etc, etc, etc) is hard.
2. The controls might not look as the user expects.

Personally, I'd generally try to let form controls stick to the system defaults and not try to deviate from them. Give users what they expect.

Answer 2

yes, it is quite easy.

you can use niceforms, which is independet script
for making nice looking forms, then you can modify
the graphics images / CSS as your wish.

The idea is, coding something that looks the same
with same funcionality but different design, then
you need to "give it life" with some javascript magic :)

then, you have to have ilsteners all over the place, to
check what the user clicked, than you need to reflect
that same value to the pre-hidden form element the
corresponds to the "fake" one. means, to manipulate it.
then when you send the form, the right values are places via JS.

nice forms demo page