Skip to main content
X

Explore your training options in 10 minutes

CSS Tutorials

Learn How to Customize Checkboxes and Radio Buttons with Pure CSS

Christina Kopecky - November 10, 2020


Sometimes when we create forms, we need to use checkbox and radio button inputs to collect user preferences, agreeing to terms, or demographic data. HTML input elements like checkboxes or radio buttons have a default appearance. If you would like to alter the appearance at all, you can use CSS to customize a look to your liking. This article will show you a sample of how to customize a checkbox and a radio input for your form or web page.

HTML Setup

The HTML skeleton code that we will style is basically the same for both checkboxes and radio buttons.

Our main container for one checkbox/radio button will be the HTML label element. Inside that label, we’ll have an input element with its appropriate type and a span element that will show whether or not the element has been selected.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

<html>
<head>
 
  <style>
	/* No CSS Here Yet. */
  </style>>
 
</head>
 <body>
   <h2>Radio Button and Checkbox CSS Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked="checked">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
   <script href="script.js"></script>
 </body>
</html>

The first set of inputs in the markup above are radio buttons. You’ll use radio buttons for forms when a user needs to choose only one selection from multiple choices.

The second set is checkboxes. Checkboxes are used when users can select multiple choices if they’d like from a selection of choices. They are also used at points where a user just needs to either agree/disagree or yes/no to something.

These HTML elements have default appearances. If you’d like to customize them, you can certainly do that though! You can use CSS to adjust the style:

CSS Setup

In order to change up the styling of your radio buttons or your checkboxes, you have to break down the problem in the following steps:

  1. Customize the label
    1. Display property
    2. Position relative
    3. Cursor pointer
    4. Margin and padding to make it aesthetically pleasing
  2. Hide the default checkbox
    1. Display property
  3. Create a container that will be the custom checkbox
    1. Height
    2. Width
    3. Background
    4. Position – absolute
    5. Top, left values set
  4. Add something special that will happen on hover (i.e. change background color of the checkbox)
  5. Change background color when box or button is checked
  6. Hide checkmark or circle when not checked
  7. Show checkmark or circle when checked
  8. Style the checkmark
  9. Style the circle

Before looking at the code below, I would recommend trying to figure it out on your own given the skeleton HTML and the breakdown of steps to solve the problem above.

Solution Code:

<html>
<head>
 
 <style>
  /* Customize the label (the input) */
label {
 display: block;
 position: relative;
 padding-left: 35px;
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
/* Hide the browser's default checkbox */
label input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}
 
/* Create a custom checkbox container */
.checkmark, .link {
 position: absolute;
 top: 0;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #eee;
}
 
/* Add border radius for the radio button */
.circle {
 border-radius: 50%;
}
 
/* On mouse-over, add a background color */
label:hover input ~ .checkmark {
 background-color: #ccc;
}
 
/* When the checkbox is checked, add a blue background */
label input:checked ~ .checkmark {
 background-color: #2196F3;
}
 
/* Create the checkmark/circle (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}
 
/* Show the checkmark when checked */
label input:checked ~ .checkmark:after {
 display: block;
}
 
/* Style the checkmark */
label .checkmark:after {
 left: 10px;
 top: 3px;
 width: 5px;
 height: 15px;
 border: solid white;
 border-width: 0 3px 3px 0;
 /* always check to see if you need to use the css browser prefixes */
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
 
/* Style the radio button circle */
label .circle:after {
 width: 15px;
 height: 15px;
 /* since .circle and .checkmark are technically the same element, we have to set border none otherwise an unwanted checkmark will show up on screen */
 border: none;
 background: white;
 border-radius: 50%;
 left: 20%;
 top: 20%;
}
 
 </style>
 
</head>
 <body>
   <h2>CSS Radio Button and Checkbox Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked>
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example" checked>
     <span class="checkmark"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
   <label class="input">Six
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
 </body>
</html>

There you have it; examples of radio buttons and checkboxes in CSS. This may be a bit to wrap your mind around at first, but you’ll get it! If you’re able to get through this CSS exercise, you’re ready to forge ahead to more difficult topics.



About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content