Thomas Andrew Hansen
Tech
Tutorials
How to make your radio or checkboxe inputs 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 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.

    I hope you find this little tutorial useful, without too much bloat. If you have any questions on how you can do this, feel free to shoot me a message.