Custom Checkbox and Radio Buttons with Html & CSS

Hey, this is my first blog and I am going to share how we can make custom Checkbox and Radio buttons using HTML with CSS and i am using React.js library for this.

these are my radio buttons and checkbox list

In Radio Buttons i am using simple Grey color for the text and after clicking on that it gets active and color of text changes to Blue.

In CheckList i am using star images instead of old fashion checkbox tick-mark.

Here is the html code for checkbox list. I am using map here because i am having many values.

You have to take checkbox, star image and text value in single label.

Here we have values in state.

Here is the CSS I am using

All the major things are here. First i am applying “display:none” to the main checkbox

checkbox[type=”checkbox”] {
  display: none;
}

and you can see in html I am taking checkbox, image(star) and text in single label so now when i clicked on the label it got the checkbox gets checked & unchecked but as I have applied “display : none” to the image it is not showing initially . Now when the checkbox is checked the image class properties are changed to “display: block” and now the image is shown

.checkbox[type="checkbox"]:checked + .stock-tick{
  display: block;
}

Now Radio Buttons are also quite same as checkbox

Blue one is active

Here is the Html Code

In this the same thing happening i am taking Text and input type radio button in single Label so when i click on text it gets checked.

Here is the CSS

Now in this when the radio button is not checked its text color is grey and the main radio button is “display:none”.

.graphical-radio {
color: grey
}
.radio[type="radio"]{
display: none;
}

And when it is checked you can change its css like this

.radio[type="radio"]:checked + .graphical-radio{
color: blue;
}

I hope you enjoyed this article on Custom Checkbox and Radio Buttons with Html & CSS

Feel free to comment and like this article so that others can find it easily on Medium!

Hi, My name is Deepak Mehra. I am a Frontend Developer at ZestGeek. I write about JavaScript and reactjs. And sharing my worldview with everyone.