Radio Buttons

by Lalji Tadhani

HTML

<div class="radio-group">
<input type="radio" id="1-1" name="n1" checked><label for="1-1">One</label><input type="radio" id="1-2" name="n1"><label for="1-2">Two</label><input type="radio" id="1-3" name="n1"><label for="1-3">Three</label>
</div>
  
<div class="radio-group">
  <input type="radio" id="2-1" name="n2" checked><!--
  --><label for="2-1">One</label><!--
  --><input type="radio" id="2-2" name="n2"><!--
  --><label for="2-2">Two</label><!--
  --><input type="radio" id="2-3" name="n2"><!--
  --><label for="2-3">Three</label>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
  background: #332f35;
  font-family: roboto;
}
input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}
label {
  color: #9a929e;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 20px;
}
input[type=radio]:checked + label {
  color: #ccc8ce;
  background: #675f6b;
}
label + input[type=radio] + label {
  border-left: solid 3px #675f6b;
}
.radio-group {
  border: solid 3px #675f6b;
  display: inline-block;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
}