DEV Community

Cover image for Custom checkbox and radio buttons in CSS
Shubham Tiwari
Shubham Tiwari

Posted on

Custom checkbox and radio buttons in CSS

Hello Guys today i will be discussing about how to create a custom checkbox or radio button with css.
I got this design from @kevinpowell and thanks to him that i know many new things in CSS today.

Let's get started...

So, To create a custom checkbox or radio button, all you have to do is apply the "appearance:none" property to the checkbox or radio buttona and then style the checkbox or radio button by providing it the custom width and height and other stylings related to colors, borders, backgrounds.

Example of custom radio button 

<input type="radio" name="theme" checked />
Enter fullscreen mode Exit fullscreen mode 
input[type="radio"]{
  appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  outline: 2px solid crimson;
  outline-offset: 2px;
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode
  • It will create a custom radio button with some custom stylings
  • You can do the same for the checkbox also by using type=checkbox and then setting the type in css selector as checkbox.

Targeting the checked state - 

input[type="radio"]:checked {
  background: red;
}
Enter fullscreen mode Exit fullscreen mode
  • When you click the radio button, its background color will become red.
  • You can also provide other stylings to the checked state.

Codepen Example

  • You would love this one for sure

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (0)