You might be thinking we haven't used these classes anywhere in the HTML code actually these classes will be added to the DOM by the jQuery at run time.

Let's take a look at the following images.īackground: url('checkbox.png') no-repeat īackground: url('checkbox-hover.png') no-repeat īackground: url('checkbox-selected.png') no-repeat However if you download the source code it will contain both the simple and sprite version of this custom checkbox example. But you should combine all these images in an image sprite form before implementing this solution in a real project for better performance and minimizing the HTTP request. To keep this example simple and easy we have used different images to specify the different states of a checkbox like normal, hover, selected etc. Required if you want to get the values from these checkboxes using any server side script. Proper value, because it is required for this solution to work. Now add the name attribute to the elements with a To checkbox on element and place in your HTML code. The HTML CodeĬreate the checkboxes through setting the type attribute Also, it is highly compatible across the browsers and work seamlessly even on the older version of the Internet Explorer such as IE7. This solution will give you the full control over the style and placement of the checkboxes and very easy to implement in any project. There are many jQuery plug-ins available to customize checkbox elements but they are too complex and not so easy to integrate. In this tutorial we will create custom checkboxes that appears consistent across the browsers with the help of CSS and little bit of jQuery. So we have to find another way to style checkboxes. If you try to customize the checkboxes directly using the CSS properties like background or border it will not produce the desired result, because most of the form elements are native part of theīrowsers and does not accepts most of the visual styling. Topic: JavaScript / jQuery Prev| Next Answer: Use the CSS :checked Pseudo-class with jQuery How to create custom checkboxes in HTML using CSS and jQuery

Best editor for php html css jquery