Pure CSS option selector

by Saksham Malhotra

HTML

<table>
  <tr class="kleurPerson">
    <td class="kleur1">
      <input type="radio" name="color" id="kleur1" value="Midnight black"> Midnight Black
      <div></div>
    </td>
    <td class="kleur2">
      <input type="radio" name="color" id="kleur1" value="Midnight black">Sky blue
      <div></div>
    </td>
    <td class="kleur3">
      <input type="radio" name="color" id="kleur1" value="Midnight black"> Matte red
      <div></div>
    </td>
    <td class="kleur4">
      <input type="radio" name="color" id="kleur1" value="Midnight black"> Slick white
      <div></div>
    </td>
    <td class="kleur5">
      <input type="radio" name="color" id="kleur1" value="Midnight black"> Silver
      <div></div>
    </td>
  </tr>
</table>

<label for="kleur">Mercedes</label>

CSS

.kleurPerson td div {
  display: none;
}

#kleur1:checked + div,
#kleur2:checked+ div,
#kleur3:checked+ div,
#kleur4:checked+ div,
#kleur5:checked+ div {
  display: table-cell;
}

.kleurPerson td div {
  height: 20px;
  width: 20px;
  border: 1px solid black;
}

.kleurPerson td.kleur1 div {
  background-color: black;
}

.kleurPerson td.kleur2 div {
  background-color: blue;
}

.kleurPerson td.kleur3 div {
  background-color: red;
}

.kleurPerson td.kleur4 div {
  background-color: white;
}

.kleurPerson td.kleur5 div {
  background-color: grey;
}