Have Geek Brain

Style form elements (select, checkbox, radio, etc.)?

Styling form elements using css can be problematic as each browser renders the tag differently (just like unchecking safari checkboxes).

Well lets you ignore safari for a while, skin input and button are pretty light, but how to completely select the cover, checkbox, radio, etc.

See the following pages:
Uncheck the box
Select skin
Cancel skins

I've heard that some JS frameworks like EXTJS or MooTools can do this, but I don't want a solution for a large scale framework solution, just an independent JS and we can modify the skin as we see fit, without any JQuery solution as I am not using it.

Any idea to do this without using any particular framework?

+1


a source to share


2 answers


There are quite a few javascript solutions out there today that allow a wide range of customization for the styles of form elements. A quick google came up with some nice ones:

Today you can find a variety of styles of stylesheets at Codepen.com



Old answer (as of May 16, 2009):

yes, it's pretty simple.

you can use niceforms which is an independent script
to create nice shapes, then you can change the
graphics / CSS as your desire.

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

then you have to have ilsteners all over the place to
check what the user has clicked, than you have to flip
the same value to the previously hidden form element
matches the "fake" one. means to manipulate him.
Then when you submit the form, the correct values ​​are places via JS.

+3


a source


If you want complete control, you usually need to completely replace the browser controls and spoof them with other elements, stylesheets, and scripts.

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

However, the whole concept has a couple of problems.



  • Attempting to make the controls behave as the user expects (given input by clicking, double-clicking, triple-clicking, right-clicking, dragging, arrow keys, control keys, etc., etc., etc.) ) / STRONG>.
  • The controls may not look what the user expects.

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

+6


a source






More articles:


All Articles