Creating Stylish Radio Switch Buttons with CSS

Radio switch buttons, also known as radio buttons or radio inputs, are a type of form input element in HTML used to allow users to select one option from a set of mutually exclusive choices. Unlike checkboxes, where users can select multiple options simultaneously, radio buttons allow users to choose only one option from a predefined list.

In CSS, you can style radio buttons to make them visually appealing and match the design of your website or application. Here's how you can create and style radio switch buttons using CSS

HTML Structure

First, you need to create the HTML structure for your radio switch buttons. You use the <input type="radio"> element to create individual radio buttons. Each radio button should have a unique name attribute, which groups them together so that users can select only one option within that group.

CSS Styling

To style these radio buttons, you can use CSS to customize their appearance. Common styles include changing the background color, adjusting the size, and creating a switch-like appearance.

JavaScript (Optional)

If you want to enhance user experience, you can add JavaScript to provide additional interactivity, such as animations when the radio button is selected.

By following these steps and customizing the CSS styles to your liking, you can create radio switch buttons in CSS that fit the design of your website or application. Users can then select options by clicking on the visually customized radio buttons.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <input type="checkbox" id="check" />
      <label for="check" class="btn"></label>
    </div>
  </body>
</html>

css/style.css

* {
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: aliceblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  width: 200px;
  height: 100px;
  background-color: #c1c1c1;
  border-radius: 200px;
  cursor: pointer;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.btn::before {
  position: absolute;
  content: "";
  width: 90px;
  height: 90px;
  background-color: #fff;
  border-radius: 200px;
  margin: 5px;
  transition: 0.5s;
}

input:checked + .btn {
  background-color: #dc143c;
}
input:checked + .btn::before {
  transform: translateX(100px);
}

input {
  display: none;
}

.container {
  transition: background-color 0.3s;
}

/* Change .container background when checkbox is checked */
/* Change .container background when checkbox is checked */
#check:checked + .btn + .container {
  background-color: red;
}

js/script.js

document.addEventListener("DOMContentLoaded", function () {
  const checkbox = document.getElementById("check");
  const container = document.querySelector(".container");
  checkbox.addEventListener("change", function () {
    if (this.checked) {
      container.style.backgroundColor = "#333";
    } else {
      container.style.backgroundColor = "aliceblue";
    }
  });
});

The JavaScript code you've provided is an event listener that listens for the "DOMContentLoaded" event on the document object. Once the DOM content has been fully loaded.

It selects an HTML element with the ID "check" and assigns it to the checkbox variable.
It selects an HTML element with the class "container" and assigns it to the container variable.
It adds an event listener to the checkbox element for the "change" event.
If the checkbox is checked (this.checked is true), it sets the background color of the container element to "#333" (dark gray).
If the checkbox is unchecked (this.checked is false), it sets the background color of the container element to "aliceblue" (a light blue color).

This code effectively changes the background color of the container element based on the state of the checkbox. If the checkbox is checked, the background color becomes dark gray; if it's unchecked, the background color becomes light blue.

It's a common use case for enhancing user interfaces with interactivity, such as toggling styles or showing/hiding elements based on user input.

Output