How do I change the appearance of checkboxes and radio buttons with CSS?

By /

Checkboxes and radio buttons are essential form elements used to collect user input on web forms. While their default appearance is functional, you may want to customise their look to match your website’s design or improve user experience. CSS provides powerful styling capabilities that allow you to change the appearance of checkboxes and radio buttons, making them more visually appealing and engageing for users. In this comprehensive guide, we will explore various techniques to style checkboxes and radio buttons with CSS, including using pseudo-elements, custom images, and CSS frameworks. By mastering these techniques, you can create unique and visually appealing form elements that enhance the overall aesthetics and usability of your web forms.

1. Basic HTML Structure for Checkboxes and Radio Buttons

Before we begin styling checkboxes and radio buttons, let’s set up the basic HTML structure for these form elements:

Checkboxes:

<!DOCTYPE html>
<html>
<head>
  <title>Styling Checkboxes and Radio Buttons with CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <label>
    <input type="checkbox">
    Checkbox Option 1
  </label>
  <label>
    <input type="checkbox">
    Checkbox Option 2
  </label>
</body>
</html>

Radio Buttons:

<!DOCTYPE html>
<html>
<head>
  <title>Styling Checkboxes and Radio Buttons with CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <label>
    <input type="radio" name="option" value="option1">
    Radio Option 1
  </label>
  <label>
    <input type="radio" name="option" value="option2">
    Radio Option 2
  </label>
</body>
</html>

In these examples, we have a set of checkboxes and radio buttons wrapped in label elements. The for attribute of the label is omitted, allowing users to click the text next to the input element to trigger the selection.

2. Styling Checkboxes with CSS

Customising Checkboxes using Pseudo-elements

To style checkboxes with CSS, we can use pseudo-elements to create custom checkbox visuals. We’ll hide the default checkbox input and use a pseudo-element to create a custom checkbox.

/* Styling checkboxes with CSS */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

input[type="checkbox"] + label {
  position: relative;
  padding-left: 25px; /* Set the space for the custom checkbox */
  cursor: pointer;
}

input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #000; /* Customise checkbox border */
  background-color: #fff; /* Customise checkbox background */
}

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Change the checkbox background when checked */
}

In this example, we hide the default checkbox using opacity: 0; and set its position to absolute prevent it from affecting the layout.

We style the custom checkbox using the ::before pseudo-element of the label element. The pseudo-element’s dimensions and appearance can be customised using CSS properties such as width, height, border, and background-color.

We use the :checked pseudo-class to change the checkbox’s appearance when it is checked. In this case, we change the background colour to #007bff indicate the selection.

3. Styling Radio Buttons with CSS

Customising Radio Buttons using Pseudo-elements

Similar to checkboxes, we can use pseudo-elements to style radio buttons with CSS. We’ll hide the default radio input and use a pseudo-element to create a custom radio button.

/* Styling radio buttons with CSS */
input[type="radio"] {
  position: absolute;
  opacity: 0;
}

input[type="radio"] + label {
  position: relative;
  padding-left: 25px; /* Set the space for the custom radio button */
  cursor: pointer;
}

input[type="radio"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #000; /* Customise radio button border */
  border-radius: 50%; /* Make it circular to mimic radio button */
  background-color: #fff; /* Customise radio button background */
}

input[type="radio"]:checked + label::before {
  background-color: #007bff; /* Change the radio button background when checked */
}

In this example, we follow a similar approach as with checkboxes. The default radio input is hidden using opacity: 0;, and its position is set to absolute to remove it from the layout.

We style the custom radio button using the ::before pseudo-element of the label element. The pseudo-element’s dimensions and appearance can be customised using CSS properties such as width, height, border, border-radius, and background-color.

We use the :checked pseudo-class to change the radio button’s appearance when it is checked. In this case, we change the background colour to #007bff to indicate the selection.

4. Styling with Custom Images

Another way to customise checkboxes and radio buttons is by using custom images. You can create custom images to represent the checked and unchecked states of checkboxes and radio buttons.

Styling Checkboxes with Custom Images

/* Styling checkboxes with custom images */
input[type="checkbox"] {
  /* Hide default checkbox */
  display: none;
}

input[type="checkbox"] + label {
  /* Set the space for the custom checkbox image */
  padding-left: 25px;
  cursor: pointer;
  background-image: url('unchecked.png'); /* Set the default checkbox image */
  background-repeat: no-repeat;
  background-size: 20px; /* Set the size of the image */
}

input[type="checkbox"]:checked + label {
  background-image: url('checked.png'); /* Set the custom image when checked */
}

In this example, we hide the default checkbox using display: none;.

We set the custom checkbox image using the background-image property and specify the URL of the image file. The image is displayed next to the label text using the background-repeat and background-size properties.

We use the :checked pseudo-class to change the checkbox image when it is checked. In this case, we set a different background image to indicate the checked state.

Styling Radio Buttons with Custom Images

/* Styling radio buttons with custom images */
input[type="radio"] {
  /* Hide default radio button */
  display: none;
}

input[type="radio"] + label {
  /* Set the space for the custom radio button image */
  padding-left: 25px;
  cursor: pointer;
  background-image: url('unchecked.png'); /* Set the default radio button image */
  background-repeat: no-repeat;
  background-size: 20px; /* Set the size of the image */
}

input[type="radio"]:checked + label {
  background-image: url('checked.png'); /* Set the custom image when checked */
}

In this example, we hide the default radio button using display: none;.

We set the custom radio button image using the background-image property and specify the URL of the image file. The image is displayed next to the label text using the background-repeat and background-size properties.

We use the :checked pseudo-class to change the radio button image when it is checked. In this case, we set a different background image to indicate the checked state.

5. Using CSS Frameworks

If you want to streamline the process of styling checkboxes and radio buttons, you can leverage CSS frameworks that provide ready-made styles for form elements.

One popular CSS framework that includes custom styles for form elements is Bootstrap. By including the Bootstrap CSS file in your project, you automatically get well-designed checkboxes and radio buttons.

Using Bootstrap for Styled Checkboxes and Radio Buttons

To use Bootstrap styles for checkboxes and radio buttons, follow these steps:

Step 1: Include Bootstrap CSS in your HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>Styling Checkboxes and Radio Buttons with CSS Framework</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <!-- Your content goes here -->
</body>
</html>

Step 2: Use Bootstrap classes for checkboxes and radio buttons:

<!DOCTYPE html>
<html>
<head>
  <title>Styling Checkboxes and Radio Buttons with CSS Framework</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
      Default checkbox
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
      Default radio
    </label>
  </div>
</body>
</html>

In this example, we have included the Bootstrap CSS from a CDN (Content Delivery Network) to apply the Bootstrap styles to form elements.

We use the Bootstrap class form-check-input for checkboxes and radio buttons, and form-check-label for the labels.

Bootstrap’s CSS takes care of the styling for checkboxes and radio buttons, providing a clean and modern look.

6. Conclusion

Customising the appearance of checkboxes and radio buttons with CSS enhances the visual appeal and usability of your web forms. Whether you choose to use pseudo-elements to create custom styles, add custom images, or utilise CSS frameworks, you can easily achieve unique and engageing form elements that match your website’s design.

Remember to consider accessibility when styling form elements, ensuring that the custom styles do not hinder user understanding or interaction.

With the knowledge gained from this comprehensive guide, you can confidently apply CSS styles to checkboxes and radio buttons, making your web forms more user-friendly and visually appealing. Experiment with different styles and techniques to find the perfect match for your website’s design and create a delightful user experience for your visitors.

Continue your journey…

  1. How can I add radio buttons and checkboxes in a form?
  2. How do I style form elements with CSS?
  3. What are pseudo-classes in CSS?
  4. How do I create a form in HTML?
  5. What is the role of the label tag in forms?
  6. How can I set a default value for a form input?
  7. How do I change the appearance of lists using CSS?
  8. How do I create a button in HTML?
  9. How can I apply CSS styles to only the first or last element in a container?
  10. What are the different ways to apply CSS styles to HTML elements?
Scroll to Top