Thomas Andrew Hansen
Tech
Tutorials
How to make radio or checkboxes look like buttons

Do you want to make your Checkboxes or Radio buttons from these


  • Into these something like these ->>>




    Awesome, there is no Javascript needed. Here is a way to do it, by following these simple steps.

    1. Order Your HTML Correctly!

    The label must come directly after the input

    <ul class="radio-grouped presets">
      <li>
        <input type="radio" id="seasonalWorker" name="sortfield" />
        <label for="seasonalWorker">Seasonal Worker</label>
      </li>
      <li>
        <input type="radio" id="shredTotal" name="sortfield" />
        <label for="shredTotal">Shred Total</label>
      </li>
      <li>
        <input type="radio" id="hardcore" name="sortfield" checked="checked" />
        <label for="hardcore">Hardcore</label>
      </li>
      <li>
        <input type="radio" id="family" name="sortfield" />
        <label for="family">Family</label>
      </li>
    </ul>

    2. Add this weird CSS syntax

    Make sure to add this: input[type="radio"]:checked+label

    .presets {
      list-style-type: none;
      margin: 25px 0 0 0;
      padding: 0;
      font-size: 14px;
    }
    
    .presets li {
      float: left;
      margin: 0 5px 0 0;
      width: 100px;
      height: 40px;
      position: relative;
    }
    
    .presets input[type="radio"] {
      opacity: 0;
      z-index: 2;
      display: block;
    }
    
    .presets input[type="radio"]:checked+label {
      background: aqua;
    }
    
    .presets label {
      display: block;
      padding: 10px 5px;
      border: 1px solid #ddd;
      border-radius: 5px;
      cursor: pointer;
      z-index: 1;
      text-align: center;
    }
    
    .presets label:hover {
      background: lightblue;
    }

    Other things to mention are. The Z-indexs need to correct within your application to make sure you are triggering the radio or checkboxes.

    If you have any questions on how you can do this, feel free to shoot me a message.