Solved

display a 'X' for an html checkbox

Posted on 2013-06-17
2
252 Views
Last Modified: 2013-08-27
Hi experts,

Is it possible display a 'x' for an html checkbox when we click on instead of 'tick' mark. Can we change this? Maybe using a Javascript code?

Regards,
0
Comment
Question by:alcani
2 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39255323
You mean you want to use custom it is possible using css only also:
http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39255325
I think you are better off leaving it a check as is since that will be easier to make your form compatible with multiple devices and browsers.   Otherwise, the way to do what you want is with a sprite like shown here

http://csscheckbox.com
and
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/. ( Just make your own sprite with an X instead of a Tick.)

Alternative options with a tick.
http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/
http://cssdeck.com/labs/css-checkbox-styles.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question