TriState

by Ravindra Athreya

HTML

<div>
  <span class="tristate tristate-checkbox">
    <input type="radio" id="item1-state-off" name="item1" value="-1" checked>
    <input type="radio" id="item1-state-null" name="item1" value="0">
    <input type="radio" id="item1-state-on" name="item1" value="1">
    <i></i>
    <label for="item1-state-null">UnChecked</label>
    <label for="item1-state-on">Intermidiate</label>
    <label for="item1-state-off">Checked</label>
  </span>
</div>
<div style="margin-top: 10px;">
  <span class="tristate tristate-switcher">
    <input type="radio" id="item2-state-off" name="item2" value="-1" checked>
    <input type="radio" id="item2-state-null" name="item2" value="0">
    <input type="radio" id="item2-state-on" name="item2" value="1">
    <i></i>
    <label for="item2-state-null">Off</label>
    <label for="item2-state-on">SB</label>
    <label for="item2-state-off">ON</label>
  </span>
</div>
<div style="margin-top: 15px;">
  <span class="tristate tristate-rotate">
    <input type="radio" id="item3-state-off" name="item3" value="-1" checked>
    <input type="radio" id="item3-state-null" name="item3" value="0">
    <input type="radio" id="item3-state-on" name="item3" value="1">
    <i></i>
    <label for="item3-state-null">1</label>
    <label for="item3-state-on">2</label>
    <label for="item3-state-off">3</label>
  </span>
</div>

CSS

.tristate {
  position: relative;
  display: inline-block;
}
.tristate > input[type="radio"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  opacity: 0;
}
.tristate > input[type="radio"] + i {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: top;
}
.tristate > input[type="radio"] + i, .tristate > input[type="radio"] + i:before, .tristate > input[type="radio"] + i:after {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.tristate > input[type="radio"]:first-child {
  z-index: 10;
}
.tristate > input[type="radio"]:first-child:checked {
  z-index: 0;
}
.tristate > input[type="radio"]:checked + input[type="radio"] {
  z-index: 10;
}
.tristate > input[type="radio"]:checked + i + label, .tristate > input[type="radio"]:checked + i + label + label {
  display: none;
}
.tristate > input[type="radio"]:checked + input[type="radio"] + i + label, .tristate > input[type="radio"]:checked + input[type="radio"] + i + label + label + label {
  display: none;
}
.tristate > input[type="radio"]:checked + input[type="radio"] + input[type="radio"] + i + label + label, .tristate > input[type="radio"]:checked + input[type="radio"] + input[type="radio"] + i + label + label + label {
  display: none;
}
.tristate-checkbox > input[type="radio"] + i {
  border: solid 2px #bdbdbd;
  border-radius: 3px;
}
.tristate-checkbox > input[type="radio"] + i:before {
  content: ' ';
  display: block;
  position: absolute;
  left: -2px;
  top: -2px;
  right: -2px;
  bottom: -2px;
  background-color: #8b8b8b;
  border-radius: 3px;
}
.tristate-checkbox > input[type="radio"] + i:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 4px;
  top: 7px;
  color: white;
  border-bottom: solid 3px;
  opacity: 0;
}
.tristate-checkbox > input[type="radio"]:checked + i {
  background-color: #009688;
}
.tristate-checkbox > input[type="radio"]:checked + i:before {
  background-color:...