How to Create a Custom Checkbox and Radio Buttons with CSS

Creating custom checkbox and radio buttons with CSS allows you to style these form elements to match the design of your website. By customizing their appearance, you can enhance the overall look and user experience of your forms. In this tutorial, we will explore how to create custom checkbox and radio buttons using CSS, providing step-by-step instructions to help you implement these stylish elements on your website. Let’s get started!

Today, we’ll be learning how to create custom checkbox and radio buttons using only CSS. Custom checkboxes and radio buttons not only enhance the user experience but also provide a visually appealing design for your website forms. Let’s dive into the tutorial!

Creating the Markup

The first step is to create the HTML markup for our custom checkboxes and radio buttons. We’ll need a container element and individual input elements for each checkbox or radio button.

<div class="checkbox-container">
  <input type="checkbox" id="checkbox-1" name="checkbox-1" />
  <label for="checkbox-1">Checkbox 1</label>
</div>

<div class="radio-container">
  <input type="radio" id="radio-1" name="radio" />
  <label for="radio-1">Radio 1</label>
</div>

Make sure to replace “Checkbox 1” and “Radio 1” with your desired labels. We have assigned unique IDs and names to each input element, which will be used for styling purposes.

Styling the Checkboxes

Now let’s move on to the CSS part. We’ll start by targeting the checkbox input elements and hiding them using the display: none; property.

input[type="checkbox"] {
  display: none;
}

Next, we’ll create custom styles for the labels associated with the checkboxes. We’ll use the ::before pseudo-element to create the checkmark icon and style the labels to make them look like checkboxes.

input[type="checkbox"] + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 3px;
}

input[type="checkbox"]:checked + label::before {
  background-color: #2196F3;
}

input[type="checkbox"] + label::after {
  content: "✔";
  position: absolute;
  left: 4px;
  top: -1px;
  font-size: 14px;
  color: #fff;
  opacity: 0;
}

input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

The above code adds a border and border-radius to create a box around the checkbox. The checkmark icon is displayed when the checkbox is checked, and the background color changes to provide visual feedback to the user.

Styling the Radio Buttons

Now, let’s move on to styling the radio buttons. Similar to the checkboxes, we’ll hide the radio input elements and style the labels to resemble radio buttons.

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

input[type="radio"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
}

input[type="radio"]:checked + label::before {
  background-color: #2196F3;
}

input[type="radio"] + label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
}

input[type="radio"]:checked + label::after {
  background-color: #fff;
  opacity: 1;
}

Similarly to the checkboxes, the code above creates a circular radio button using border and border-radius properties. The radio button is filled when it is selected.

Enhancing the Accessibility

Lastly, for improved accessibility, let’s use the aria-checked attribute to provide information to assistive technologies when a checkbox or radio button is checked.

input[type="checkbox"] + label,
input[type="radio"] + label {
  /* Existing CSS rules */
}

input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before {
  /* Existing CSS rules */
}

input[type="checkbox"]:checked + label::after,
input[type="radio"]:checked + label::after {
  /* Existing CSS rules */
}

input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
  /* New CSS rule for accessibility */
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
}

input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before {
  /* New CSS rule for accessibility */
  background-color: #2196F3;
}

input[type="checkbox"] + label::after,
input[type="radio"] + label::after {
  /* New CSS rule for accessibility */
  content: "";
  display: none;
}

By adding the above CSS rules, we make sure that the labels are still clickable, even if the associated input is hidden. This ensures that users with assistive technologies can still interact with the checkboxes and radio buttons.

That’s it! You now have custom styled checkboxes and radio buttons using CSS only. Feel free to modify the styles and experiment with different colors, sizes, and animations to suit your website’s design.

We hope you found this tutorial helpful in creating custom checkboxes and radio buttons with CSS. Happy coding!

Creating custom checkbox and radio buttons with CSS is a versatile and creative way to enhance user interface design. By utilizing CSS properties and selectors, developers can easily customize the appearance and functionality of these elements to better suit the needs of their projects. With attention to detail and creativity, designers can create more visually appealing and user-friendly interfaces that elevate the overall user experience.