Check Out the Chart.js Course: Chart.js, The Missing Manual Course
Categories
Uncategorized

How to Create Radio Button Checked CSS Styling

How to Create Radio Button Checked CSS Styling

How to Create Radio Button Checked CSS Styling

In this video we will explore how to create radio button checked with css styling. This is basic video helping people who start out with HTML to learn how to create radio button grouped together and change the design of the checked button.

A radio button group is a group of radio buttons that are connected. Only one option can be selected with a radio button. By grouping them it understands which radio button is part of the group. However, adding styling to CSS requires some tricky options. We will use the :after and :checked attribute to make a custom design.

How to Create Radio Button Checked CSS Styling

Code Radio Button Checked CSS Styling

Below you can find the code snippet of the Radio Button Checked CSS Styling.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Create Radio Button Checked CSS Styling</title>
    <style>
      input[type="radio"]:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -1px;
        left: -1px;
        position: relative;
        background-color: gray;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 0px solid white;
      }
      input[type="radio"]:checked:after {
        background-color: green;
      }

      * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartMenu {
        width: 100vw;
        height: 40px;
        background: #1A1A1A;
        color: rgba(255, 26, 104, 1);
      }
      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }
      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(255, 26, 104, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(255, 26, 104, 1);
        background: white;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="chartMenu">
      <p>WWW.CHARTJS3.COM | How to Create Radio Button Checked CSS Styling</p>
    </div>
    <div class="chartCard">
      <div class="chartBox">

        <form>
          <label>
            <input type="radio" name="radio-group" value="yes"> Yes
          </label>
          <br>
          <label>
            <input type="radio" name="radio-group" value="no"> No
          </label>
        </form>

      </div>
    </div>
  </body>
</html>

Leave a Reply

en_USEnglish