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

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?

Today there are quite many javascript solutions which allow a wide range of customization for form elements styling. A quick google came up with a few nice ones:

• Perhaps the best known is the Bootstrap CSS framework:
  https://getbootstrap.com/docs/4.0/components/forms

• https://www.psd2html.com/js-custom-forms (jQuery plugin)

• https://purecss.io/forms

• https://github.com/select2/select2

• https://github.com/harvesthq/chosen

• Checkboxes/Radios:
  

  • https://codepen.io/vsync/pen/aBOOZB
  • https://codepen.io/vsync/pen/wKkuz
  • https://codepen.io/manabox/pen/raQmpL

Today you can find many kinds of form element styling on Codepen.com

Old answer (from May 16 '09):

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.