Completely CSS: Custom checkboxes, radio buttons and select boxes

<div class="container">

  <div class="control-group">

    <h1>Checkboxes</h1>

    <label class="control control--checkbox">First checkbox

      <input type="checkbox" checked="checked"/>

      <div class="control__indicator"></div>

    </label>

    <label class="control control--checkbox">Second checkbox

      <input type="checkbox"/>

      <div class="control__indicator"></div>

    </label>

    <label class="control control--checkbox">Disabled

      <input type="checkbox" disabled="disabled"/>

      <div class="control__indicator"></div>

    </label>

    <label class="control control--checkbox">Disabled & checked

      <input type="checkbox" disabled="disabled" checked="checked"/>

      <div class="control__indicator"></div>

    </label>

  </div>

  <div class="control-group">

    <h1>Radio buttons</h1>

    <label class="control control--radio">First radio

      <input type="radio" name="radio" checked="checked"/>

      <div class="control__indicator"></div>

    </label>

    <label class="control control--radio">Second radio

      <input type="radio" name="radio"/>

      <div class="control__indicator"></div>

    </label>

    <label class="control control--radio">Disabled

      <input type="radio" name="radio2" disabled="disabled"/>

      <div class="control__indicator"></div>

    </label>

    <label class="control control--radio">Disabled & checked

      <input type="radio" name="radio2" disabled="disabled" checked="checked"/>

      <div class="control__indicator"></div>

    </label>

  </div>

  <div class="control-group">

    <h1>Select boxes</h1>

    <div class="select">

      <select>

        <option>First select</option>

        <option>Option</option>

        <option>Option</option>

      </select>

      <div class="select__arrow"></div>

    </div>

    <div class="select">

      <select>

        <option>Second select</option>

        <option>Option</option>

        <option>Option</option>

      </select>

      <div class="select__arrow"></div>

    </div>

    <div class="select">

      <select disabled="disabled">

        <option>Disabled</option>

        <option>Option</option>

        <option>Option</option>

      </select>

      <div class="select__arrow"></div>

    </div>

  </div>

</div>