CUSTOM RADIO AND CHECKBOX INPUTS USING CSS

By StartxLabs
Date 14-10-17
CUSTOM RADIO AND CHECKBOX INPUTS USING CSS
" None"

Form elements acquire default behavior according to browser and OS to which they are being viewed, but few of them are hard to customize. Simply writing CSS for them doesn’t work.

Radio and Checkboxes are few of those elements. The reason why we want to write a custom style for Radio and Checkbox inputs using CSS could be any of the following:

  • You need custom UI that matches with your theme.

  • Improved UI using transitions that add interactivity to your design.

  • Finally, the most important point “They look really bad in default style”.

 

Here are few ways which can be used to customise Radio and Checkboxes using CSS:

 

1. Use of image sprites

 

Image sprites are better if you are importing more than 2 images in your CSS. Image sprites or Combined images can reduce the number of requests and makes rendering fast.

 

But it’s an old-fashioned technique since we have to use designs over different screens and sometimes these images become a mess when we have to add more icons.

So, they are less manageable.

 

2. Using Font files

 

Most of us use many icons in our designs and to organize them Icon Fonts are the best way, Icon Fonts are quite manageable, you can add icons to your sheet anytime when there is need of new icon in your project, services like flaticon.com allows us to choose from thousands of icons and generate CSS and font files that can be directly imported in your stylesheet.

 

In this tutorial, we’ll be using fonts downloaded from flaticon as icon fonts.

You can visit flaticon and search for icons you’re looking for. Add them to your collection, after selecting the icons, click on download collection button and select Icon Font.

 

After downloading, place generated font files and import CSS into your document to proceed.

 

Now we’re ready to customize buttons.

 

Let’s say we have the following form:

<form>

<input id=“radioone” type=”radio” hidden/>

<label for=“radioone”>Radio</label>

</form>


 

From above code, it’s important to notice that we have assigned a hidden property to our radio to hide default behavior of our input.

 

Now to customize radio buttons we’ll use pseudo selectors :before in our stylesheet.

Input[type=”radio”] + label:before

{

Content: ”/f103” ;

Color: #000;

Font-family: “Flaticon”;

}


 

In the first line, I have selected all input with type radio. However, you could add a class instead of an element to apply these customizations to the particular form.

 

In the same line, I want to insert icon before label that’s why I have used :before if you want to add this after, label :after selector will do the job for you.

 

In the next line, I have provided content from my stylesheet where this particular font icon is defined and I have mentioned icon font family here “Flaticon” which tells the browser to look into that particular icon sheet corresponding to address provided in content (here address is f103).

 

Now assign the color to default element and here how it looks.

 

Now, to make checked state, we have to change the icon and its color too. To do this we’ll target label when it’s checked.

Input[type=”radio”]:checked + label:before

{

Content: ”/f108” ;

Color: #2196f3;

Font-family: “Flaticon”;

}

 

 

In above code, as we can see only content and color is changed to change icon and color respectively in the checked state :checked which is now added in the first line of our code.

 

Applying these styles when we click on the label it will look something like this which will indicate that our radio has been checked.

 

Same operations can be applied to checkboxes.

 

NOTE: For the attribute, the label should always match with input id to target hidden input otherwise these operations can’t be performed.

 

subscribe to startxlabs

startxlabs