CODEWITHSUNDEEP
htmlcsscheckbox
abu abu
abu abu

Reputation: 7022

Display content on Styled HTML checkbox

My code is like below.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: #111111;
                flex-direction: column;
            }

            input[type="checkbox"] {
                position: relative;
                width: 120px;
                height: 40px;
                margin: 10px;
                outline: none;
                background: #222222;
                -webkit-appearance: none;
                cursor: pointer;
                border-radius: 20px;
                transition: 0.5s;
            }

            input[type="checkbox"]:checked {
                background: #20b7ff;
            }

            input[type="checkbox"]:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 80px;
                height: 40px;
                background-color: #ffffff;
                border-radius: 20px;
                transform: scale(0.98, 0.96);
                transition: 0.5s;
            }

            input[type="checkbox"]:after {
                content: 'Hello';
            }

            input[type="checkbox"]:checked::before {
                left: 50px;
            }
        </style>
    </head>
    <body>
        <label>
            <input type="checkbox" name="btn" />
        </label>
    </body>
</html>

I am getting output like below.

enter image description here

I would like to show some content on right side When the white button is at left side.

enter image description here

Upvotes: 0

Views: 123

Answers (1)

A Haworth
A Haworth

Reputation: 36502

You can set the inbox to have the blue color all the time (if that's what you want) and change the after pseudo element to have different content and different positioning of it whether the input is checked or not:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Title</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #111111;
      flex-direction: column;
    }
    
    input[type="checkbox"] {
      position: relative;
      width: 120px;
      height: 40px;
      margin: 10px;
      outline: none;
      background: #222222;
      -webkit-appearance: none;
      cursor: pointer;
      border-radius: 20px;
      transition: 0.5s;
    }
    
    input[type="checkbox"] {
      background: #20b7ff;
    }
    
    input[type="checkbox"]:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 80px;
      height: 40px;
      background-color: #ffffff;
      border-radius: 20px;
      transform: scale(0.98, 0.96);
      transition: 0.5s;
    }
    
    input[type="checkbox"]:checked::after {
      content: 'Hello';
      text-align: left;
    }
    
    input[type="checkbox"]::after {
      content: "Bye";
      text-align: right;
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    input[type="checkbox"]:checked::before {
      left: 50px;
    }
  </style>
</head>

<body>
  <label>
            <input type="checkbox" name="btn" />
        </label>
</body>

</html>

You'll want to change the positioning of the words to suit your needs.

Upvotes: 2

Related Questions