Metrics Selector

by Tiago Sousa

HTML

<div id="metrics-selector" class="metrics">
  <input type="radio" name="value" id="value-f" checked>
  <label for="value-f">F</label>
  <input type="radio" name="value" id="value-c">
  <label for="value-c">C</label>

</div>

CSS

#metrics-selector {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
}
.metrics {
  border: 4px solid black;
  display: inline-block;
  border-radius: 10px;
}
.metrics > input[type="radio"] {
  display: none;
}

.metrics > label {
  cursor: pointer;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}

.metrics > label ~ label {
  border-left: 4px solid black;
}

.metrics input:checked + label {
  background: #1d1d1d;
  color: #fff;
}