Use div as radio-button

Question

How can I use a div as radio button ?

I mean that :

• you can select a div and then it is bordered blue
• you can only select one of them

Answer 1

If you want a CSS Only solution, this is an excellent one :

.labl {      display : block;      width: 400px;  }  .labl > input{ /* HIDE RADIO */      visibility: hidden; /* Makes input not-clickable */      position: absolute; /* Remove input from document flow */  }  .labl > input + div{ /* DIV STYLES */      cursor:pointer;      border:2px solid transparent;  }  .labl > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */      background-color: #ffd6bb;      border: 1px solid #ff6600;  }

<label class="labl">      <input type="radio" name="radioname" value="one_value" checked="checked"/>      <div>Small</div>  </label>  <label class="labl">      <input type="radio" name="radioname" value="another" />      <div>Small</div>  </label>

Inspired by this answer