Simple Radio Button

Learn how to implement radio buttons using only HTML and vanilla CSS, providing a lightweight and efficient solution for adding selectable input controls to your website. Radio buttons offer users a straightforward way to make single selections from a list of options, enhancing usability and accessibility.

With HTML and vanilla CSS, you can create stylish and accessible radio button components with customizable styles and responsive layouts. Define the radio button structure in HTML, style it with CSS to match your website's design language, and add basic functionality to enable selection and display.

Implementing radio buttons with HTML and vanilla CSS ensures compatibility across different browsers and devices, without relying on external libraries or frameworks. By leveraging vanilla CSS for styling, you have full control over the appearance and behavior of the radio button component, allowing for seamless integration with your website's design.

Integrating radio buttons into your website using HTML and vanilla CSS is straightforward and accessible to developers of all levels. Whether you're building a survey form, a preference selector, or a custom input interface, radio buttons provide users with a clear and intuitive input control.

Enhance user interaction and selection processes on your website by incorporating stylish and accessible radio buttons using HTML and vanilla CSS. Provide users with a straightforward and visually appealing input interface that improves usability and enhances overall user experience.

Steps to Copy the Code

Creating customized Radio Buttons with HTML and Vanilla CSS is simple with our comprehensive guide. Follow these steps to copy the code and personalize it to match your website's design:

1. Copy the Code: Start by copying the HTML and CSS code for the Radio Button components from the above code snippet.
2. Paste into Your Project: Open your project files in a code editor and paste the copied HTML and CSS code into the appropriate files. Paste the HTML code into your HTML file at the desired location where you want the Radio Buttons to appear. Paste the CSS code into your CSS file.
3. Customize as Needed: HTML and Vanilla CSS offer flexibility for customizing the appearance and behavior of your Radio Buttons. Modify the code to match your design preferences, such as adjusting colors, sizes, and styles for the radio button labels and their containers.

By following these steps, you'll be able to effectively customize Radio Button components using HTML and Vanilla CSS, allowing you to create a seamless and user-friendly selection interface for your website visitors.

Code Explanation

HTML Code

<div class="container">
  <div class="radio">
    <input id="radio-1" name="radio" type="radio" checked>
    <label for="radio-1" class="radio-label">Checked</label>
  </div>
  <div class="radio">
    <input id="radio-2" name="radio" type="radio">
    <label for="radio-2" class="radio-label">Unchecked</label>
  </div>
  <div class="radio">
    <input id="radio-3" name="radio" type="radio" disabled>
    <label for="radio-3" class="radio-label">Disabled</label>
  </div>
</div>

• <div class="container">: This <div> serves as a container for the radio buttons and their labels.
• <div class="radio">: Each radio button and its label is wrapped in a <div> with the class "radio".
• <input id="radio-1" name="radio" type="radio" checked>: This is a radio button input with the ID "radio-1", name "radio", and it's checked by default.
• <label for="radio-1" class="radio-label">Checked</label>: This label is associated with the radio button "radio-1" using the "for" attribute, and it displays the text "Checked".

Similarly, there are two more sets of radio buttons and labels, one for "Unchecked" and another for "Disabled".

CSS Code

1. Body Styles:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

• This section styles the body element.
• display: flex; sets the display property to flex, making it a flex container.
• align-items: center; aligns flex items vertically at the center.
• justify-content: center; aligns flex items horizontally at the center.
• min-height: 100vh; sets the minimum height of the body to 100% of the viewport height.

2. Radio Button Styles:

.radio {
  margin: 0.5rem;
}

• This section styles elements with the class "radio".
• margin: 0.5rem; sets a margin of 0.5rem around elements with this class.

3. Radio Button Input Styles:

.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}

• This section styles radio input elements inside elements with the class "radio".
• position: absolute; positions the radio input elements absolutely within their parent container.
• opacity: 0; sets the opacity to 0, making the radio inputs invisible.

4. Radio Button Label Styles:

.radio input[type=radio] + .radio-label:before {
  content: "";
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.2em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

• This section styles the label elements directly after the radio input elements.
• It creates a circular visual representation of the radio button.
• Various properties such as background color, border, size, position, etc., are defined.

5. Checked Radio Button Styles:

.radio input[type=radio]:checked + .radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}

• This section styles the label element that immediately follows a checked radio input.
• It changes the background color of the circular visual representation and adds a box shadow to indicate selection.

6. Focused Radio Button Styles:

.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: #3197EE;
}

• This section styles the label element that immediately follows a focused radio input.
• It removes the outline and changes the border color to indicate focus.

7. Disabled Radio Button Styles:

.radio input[type=radio]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}

• This section styles the label element that immediately follows a disabled radio input.
• It changes the appearance of the circular visual representation to indicate that the radio button is disabled.

8. Empty Radio Button Label Styles:

.radio input[type=radio] + .radio-label:empty:before {
  margin-right: 0;
}

• This section styles the label element that immediately follows an empty radio input.
• It removes the margin-right property, which might have been set previously, ensuring consistent spacing when there's no content in the label.