Can anyone tell me if it is possible to style a check box on a form.
By default clicking a check box shows a tick in it. I need it to show an X rather than a tick.
3 answers
points
There are a number of javascript plugins that can transform check boxes, like this one for example: FancyForm
You should just be able to change the image that's used to show an X or nothing instead of a tick or a cross
point
It will have to be done with JavaScript. CSS won't cut it. Checkboxes are rendered according to the browser and plattform. Remember to use progressive enhancement to ensure the fuctionality of the form for those that are not JS-capable.
An example of this would be to 1) move the form element offscreen, 2) replacing them visually with a JS-widget on the fly generated, 3) bind the JS-widget to interact with the form "in the background".
- I am of the opinion that the form elements such as the select boxes or the upload elements should not be styled unless it is absolutely necessary. There is a reason why it is so difficult to style it. The reason i believe is that it is not supposed to be styled. But there are ways to do it just as Jens Hedqvist suggested, but am a little opposed to that at the moment. No offense meant though. I am fine with anyone who wishes to use it.
- I couldn't agree more Shantharam. Styling them to far off a users expectations and conventions can be a huge usability issue. Style with extreme care. Even changing the tick to an X in a checkbox WILL disturb some users (hopefully less people than it helps/impress...). However, there are exceptions such as some internal web sites and web applications, maybe to mimic an already existing systems UI.
points
On my blog I collect things like these and for your purpose i have a proper link added some time ago.
You can find it on my blog http://progressive.soup.io/#post20360143
