'custom span to create radio button and can check span

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
}

input {
  position: absolute;

  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

input:checked ~ .checkmark {
  background-color: #2196f3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

input:checked ~ .checkmark:after {
  display: block;
}

.checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Custom Radio Buttons</h1>
    <label class="container"
      >One
      <input type="radio" checked="checked" name="radio" />
      <span class="checkmark"></span>
    </label>
    <label class="container"
      >Two
      <input type="radio" name="radio" />
      <span class="checkmark"></span>
    </label>
  </body>
</html>

I want to customize radio button. So, I put it in a container with input and span .checkmark as sibling. What I don't understand is, span is not input type but it can also be checked. Please, someone explain. I understand the code as when I check input radio will change style of span.

htmlcssbuttoninputradio


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions