CSS Radio Button

In HTML, radio buttons are input elements that allow users to select a single option from a list of choices. CSS can be used to style radio buttons, giving them a custom appearance that matches the overall design of your website.

Here’s how you can create styled radio buttons using CSS:

HTML:

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

  <input type="radio" id="option2" name="options">
  <label for="option2">Option 2</label>

  <!-- Add more radio buttons and labels as needed -->
</div>

CSS:

/* Hide the default radio button */
input[type="radio"] {
  display: none;
}

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

/* Style the radio button indicator */
input[type="radio"] + label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-radius: 50%;
}

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

In this example, we create a set of custom radio buttons inside a container div. We start by hiding the default radio button using display: none. Then, we style the labels to act as the custom radio button indicators. The ::before pseudo-element is used to create a circular indicator for the radio buttons. When a radio button is checked (selected), we change the background color of the indicator to indicate its selection.

You can further customize the appearance of the radio buttons by adjusting the CSS properties, such as size, colors, positioning, and animations, to match your design preferences.

Keep in mind that custom-styled radio buttons should remain accessible and usable for all users. Test your radio buttons on different devices and browsers to ensure they function correctly and are easy to understand.