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

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.