Skip to main content
Mediacurrent logo
Hero Background Image


Learning Bits: Styling Checkboxes and Radio Buttons

by Mario Hernandez
September 28, 2020

Styling form elements with CSS can be a challenging task but it is essential to ensure your form elements look consistent across your website.  Among form elements, Checkboxes and Radio Buttons present unique challenges when it comes to styling.  By default they can’t be styled with CSS the same way others can.

They require special attention and techniques to ensure they not only look great but also work as intended for all users including those with assistive technologies. In this short tutorial, we cover how to effectively style checkboxes using pseudo elements such as ::before and ::after, as well as pseudo classes such as :checked and :focus. This tutorial focuses on Checkboxes however, the process for styling Radio Buttons is the same.

Get the Code

The codepen ncludes checkboxes and radio buttons

Mediacurrent Learning Bits

Join us every week for new tutorials on Front-End Development, Back-End Development, Drupal, Accessibility, and more! Subscribe to our YouTube channel to get alerts for new tutorials.

Interested in Training?

Learn more about Mediacurrent's training services and how we can help your team level up. Our team of Drupal and open source experts who partner with some of the world's most recognized brands can help your entire team drive measurable success through quality training.

Mario Hernandez

Meet team member, Mario Hernandez

Mario is the Head of Learning at Mediacurrent with over 10 years of public speaking and training experience. He is a regular speaker and trainer at tech conferences including Drupal Camps in Los Angeles, San Diego, San Francisco, Washington DC, and others.  Mario is a co-host of the Mediacurrent podcast where guest speakers discuss open source solutions.

In addition to being the Head of Learning, Mario is a Senior Front-End Developer working on some of the world’s most popular brands. Mario has vast experience in all things Front End as well as Drupal.  He developed the very successful Component-Based Development training workshop which has been conducted at DrupalCons throughout America and Europe. Mario's strengths are training clients and their development teams through custom-tailored curriculums.

Learn more about Mario >