Simple CSS3 Checkboxes and Radio Buttons| Code Snippet #14

10 Jan , 2014  Code Snippets 

Simple CSS3 Checkboxes and radio buttonsCode Snippet #14: Code to create simple CSS3 checkboxes and radio buttons for professional UI designing.

UI designing is an important part of user friendly interfaces for the website users. Creating cool looking CSS3 checkboxes and radio buttons are important while developing forms on your UI. Today, we are going to create checkboxes and radio buttons using CSS3. Radio buttons and checkboxes are important element for a web design where there is user interactions on the web page. Making these elements elegant and professional can make the user interaction more fun.

Not to forget, these UI elements do not work on older browsers like IE8. Please use modern browsers to view the proper functioning of the demo. This code snippet is targeted for modern browsers.

Check out the demo below for CSS3 checkboxes and radio buttons:

Let’s get into the details of the coding behind the scene for the demo.

HTML Markup:

CSS3:

Explanation:

The HTML here is simple to understand. In HTML, we create input types for radio buttons and checkboxes. We also place a label for each input type.

In CSS3, we style the labels and use pseudo-elements for the effects.  Initially, we hide all the default input types for checkboxes and radio buttons by the following code:

The labels of the UI elements are styled using the below codes:

Replace the hidden input type of checkbox with the below code:

We have used the pseudo-element ::before to replace the default input type. :before inserts content before the element content of the selected element. The main field in the styling is the content:””; which is used in relation with pseudo elements to insert the generated content.

Similarly, replace the radio button input type using the below code:

Now, what happens when the pseudo elements inserted are clicked. Here is the styles for when the radio button is selected and checkboxes are checked:

The tick mark is generated using the below code:

Similarly, the dot in the radio buttons are generated using the below code:

This is how this simple CSS3 radio buttons and checkboxes are created or generated. Hope you enjoyed this tutorial. If you have any questions regarding the code or any other clarifications, please send us a note in the comment box below.

Other articles related to checkboxes and radio buttons are:



, ,

Comments are closed.