JSFiddle - React, Tailwind, and code Playground

Fliplet - Form Styles - Radios/Checkboxes

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">

      <form class="form-horizontal">

        <div class="form-group">
          <div class="col-sm-12 control-label">
            <label>Radios</label>
            <!-- PLACE YOUR QUESTION HERE -->
          </div>

          <!-- DON'T FORGET TO CHANGE THE for="" TO MATCH THE id="" OF THE INPUT IN EACH RADIO -->
          <!-- DON'T FORGET TO GIVE A DIFFERENT id="" FOR EVERY INPUT -->
          <!-- DON'T FORGET THAT THE name="" NEEDS TO BE THE SAME FOR EACH RADIO GROUP - IDEALLY IT WOULD BE THE QUESTION LABEL -->
          <div class="col-sm-12 radio">
            <input id="rd1" type="radio" name="Radios" class="rtgl rtgl-ios" value="" />
            <label for="rd1" class="rtgl-btn"></label>
            <label for="rd1">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</label>
          </div>
          <div class="col-sm-12 radio">
            <input id="rd2" type="radio" name="Radios" class="rtgl rtgl-ios" value="" />
            <label for="rd2" class="rtgl-btn"></label>
            <label for="rd2">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</label>
          </div>
          <div class="col-sm-12 radio">
            <input id="rd3" type="radio" name="Radios" class="rtgl rtgl-ios" value="" />
            <label for="rd3" class="rtgl-btn"></label>
            <label for="rd3">Donec ullamcorper nulla non metus auctor fringilla.</label>
          </div>
        </div>

      </form>

    </div>
  </div>
</div>

CSS

/* DO NOT USE THIS */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

form {
  margin: 30px 0;
}


/* END OF DO NOT USE THIS */


/* FORM STYLES */

.form-horizontal .control-label {
  text-align: left !important;
  margin-bottom: 0.8em;
}

.form-group .control-label label {
  font-weight: 600;
  margin-bottom: 0px;
  padding-top: 5px;
}

.text-helper {
  margin-top: 0.2em;
  font-size: 0.8em;
  display: block;
}

.form-group p {
  margin: 0;
}


/* RADIOS */

.form-horizontal .radio {
  padding-top: 0;
  margin-bottom: 15px;
}

.form-horizontal .radio:last-child {
  margin-bottom: 0px;
}

.radio label.rtgl-btn {
  margin-right: 15px;
}

.radio label + label {
  display: block;
  padding-top: 5px;
}


/* RADIO TOGGLE */

.rtgl {
  display: none;
}

.rtgl,
.rtgl:after,
.rtgl:before,
.rtgl *,
.rtgl *:after,
.rtgl *:before,
.rtgl + .rtgl-btn {
  box-sizing: border-box;
}

.rtgl::-moz-selection,
.rtgl:after::-moz-selection,
.rtgl:before::-moz-selection,
.rtgl *::-moz-selection,
.rtgl *:after::-moz-selection,
.rtgl *:before::-moz-selection,
.rtgl + .rtgl-btn::-moz-selection {
  background: none;
}

.rtgl::selection,
.rtgl:after::selection,
.rtgl:before::selection,
.rtgl *::selection,
.rtgl *:after::selection,
.rtgl *:before::selection,
.rtgl + .rtgl-btn::selection {
  background: none;
}

.rtgl + .rtgl-btn {
  outline: 0;
  float: left;
  width: 4em;
  height: 2em;
  margin: 0;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rtgl + .rtgl-btn {
  width: 2em;
}

.rtgl + .rtgl-btn:after,
.rtgl + .rtgl-btn:before {
  position: relative;
  display: block;
  content: "";
  height: 100%;
}

.rtgl + .rtgl-btn:after,
.rtgl + .rtgl-btn:before {
 ...