DEV Community

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

Posted on

2

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

Sentry image

Make it make sense

Only the context you need to fix your broken code with Sentry.

Start debugging →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay