Using HTML and CSS to create a custom radio button

HTML and CSS are the building blocks of the web, and together they provide the foundation for creating beautiful and functional user interfaces. One of the most commonly used form elements on the web is the radio button. Radio buttons are used to present a list of options, where the user can only select one option at a time. In this tutorial, we will walk through the steps to create a custom radio button using HTML and CSS.

Step 1: Create the HTML Markup

The first step in creating a custom radio button is to create the HTML markup. In this example, we will create a list of radio buttons with different options.

<form>
  <ul class="radio-options">
    <li>
      <input type="radio" id="option-1" name="options" value="option-1">
      <label for="option-1">Option 1</label>
    </li>
    <li>
      <input type="radio" id="option-2" name="options" value="option-2">
      <label for="option-2">Option 2</label>
    </li>
    <li>
      <input type="radio" id="option-3" name="options" value="option-3">
      <label for="option-3">Option 3</label>
    </li>
  </ul>
</form>

In the code above, we have created a form element that contains a list of radio buttons. Each radio button has a unique id, a name attribute that groups them together, and a value attribute that defines the value of the selected option. We have also added a label element for each radio button, with a for attribute that matches the id of the corresponding input element.

Step 2: Style the Radio Button

Now that we have created the HTML markup, we can begin styling the radio button. By default, radio buttons are rendered by the browser using the native operating system styles. However, we can override these styles using CSS to create a custom look and feel.

First, we will hide the default radio button by setting its display property to none. We will then create a new element to represent the radio button, and use the :before pseudo-element to style it. We will use a circular shape to represent the radio button, and add a border to indicate the selected state.

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

.radio-options li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 30px;
  cursor: pointer;
}

.radio-options li:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid #ccc;
  border-radius: 50%;
}

input[type="radio"]:checked + label:before {
  background-color: #007bff;
  border-color: #007bff;
}

In the code above, we have selected all input elements with type="radio", and set their display property to none. We have also selected the li elements that contain the radio buttons, and added some padding to the left to create space for the custom radio button. We have then used the :before pseudo-element to create the custom radio button. We have set its content property to an empty string, and given it a circular shape using the border-radius property. We have also added a border to the radio button using the `border property.

Finally, we have used the + selector to target the label element immediately after the checked radio button, and used the :before pseudo-element to style the selected state. We have set the background-color property to #007bff to give the radio button a blue background, and set the border-color property to the same color to match the background.

Step 3: Add Interactivity with JavaScript (Optional)

If you want to add interactivity to your custom radio button, you can use JavaScript to toggle the selected state of the radio button. Here's an example of how you can do this using jQuery:

$(document).ready(function() {
  $('.radio-options li').click(function() {
    $(this).find('input[type="radio"]').prop('checked', true);
    $(this).siblings().find('input[type="radio"]').prop('checked', false);
  });
});

In the code above, we have used jQuery to attach a click event handler to the li elements that contain the radio buttons. When a user clicks on an li element, we use the find() method to locate the radio button inside it, and set its checked property to true. We then use the siblings() method to locate the radio buttons in the other li elements, and set their checked property to false.

Conclusion

In this tutorial, we have walked through the steps to create a custom radio button using HTML and CSS. We have hidden the default radio button, and used CSS to create a custom element to represent it. We have also added interactivity to the radio button using JavaScript. By customizing the radio button, you can create a more engaging and visually appealing user interface for your web applications.