JSFiddle - React, Tailwind, and code Playground

test jquery mobile

by Hugo Carneiro

HTML

<form data-next-transition="" data-next-section="" data-next-page="" class="form-horizontal " novalidate="">
  <fieldset>
    <!-- Form Name 
<legend>Form name</legend>-->

    <!-- Multiple Checkboxes -->
    <div class="form-group" data-validation-rule="checkboxrule">
      <label class="col-sm-6 control-label" for="checkboxes"><span class="not-required">(Optional)</span>Checkbox </label>
      <div class="col-sm-6">
        <div class="checkbox">



          <input type="checkbox" name="checkbox0" id="checkboxes-mVi" data-label="checkbox" value="1" class="validation ">
          <label for="checkboxes-mVi"><span class="icon icon-checked"></span>1</label>
        </div>
        <div class="checkbox">



          <input type="checkbox" name="checkbox0" id="checkboxes-ReG" data-label="checkbox" value="2" class="validation ">
          <label for="checkboxes-ReG"><span class="icon icon-checked"></span>2</label>
        </div>
        <div class="checkbox">



          <input type="checkbox" name="checkbox0" id="checkboxes-14F" data-label="checkbox" value="3" class="validation ">
          <label for="checkboxes-14F"><span class="icon icon-checked"></span>3</label>
        </div>
        <div class="checkbox">



          <input type="checkbox" name="checkbox0" id="checkboxes-vyU" data-label="checkbox" value="4" class="validation ">
          <label for="checkboxes-vyU"><span class="icon icon-checked"></span>4</label>
        </div>
        <div class="checkbox">



          <input type="checkbox" name="checkbox0" id="checkboxes-C7U" data-label="checkbox" value="5" class="validation ">
          <label for="checkboxes-C7U"><span class="icon icon-checked"></span>5</label>
        </div>
        <div class="checkbox">



          <input type="checkbox" name="checkbox0" id="checkboxes-ljg" data-label="checkbox" value="6" class="validation ">
          <label for="checkboxes-ljg"><span class="icon icon-checked"></span>6</label>
        </div>

      </div>
   ...

CSS

.form-horizontal {
  position: relative;
  margin-bottom: 30px;
  line-height: 1.3em;
}

hr {
  margin-top: 0;
  margin-bottom: 0;
}

.form-horizontal hr {
  border-top: 2px solid #eee;
}

.form-horizontal hr.hr-normal {
  border-top: 1px solid #e5e5e5;
  margin-bottom: 25px;
}

.form-group {
  margin-bottom: 25px;
}

.checkbox label,
.radio label {
  position: relative;
  background: #fbfbfb;
  display: block;
  padding: 9px 12px 8px 39px;
  margin: 0 !important;
  color: #333;
}

.checkbox label:active,
.radio label:active {
  background: #f1f1f1;
}

.checkbox input,
.radio input {
  display: none;
}

.checkbox label span.icon {
  display: block;
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 19px;
  height: 17px;
  line-height: 17px;
  font-size: 19px;
  margin: 0;
  background: url("http://studio.fliplet.com/api/plugin/get_asset?resource=images/dist/unchecked.png&plugin_name=fl_form&plugin_version=1.0") left top no-repeat;
  cursor: pointer;
  pointer-events: none;
  color: transparent;
}

.radio label span.icon {
  display: none;
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 19px;
  height: 17px;
  line-height: 17px;
  font-size: 19px;
  margin: 0;
  cursor: pointer;
  pointer-events: none;
}

.checkbox input[type="checkbox"]:checked + label,
.radio input[type="radio"]:checked + label {
  background-color: #f1f1f1;
}

.checkbox input[type="checkbox"]:checked + label > span.icon,
.radio input[type="radio"]:checked + label > span.icon {
  display: block;
  background: red;
  color: #a3a3a3;
}

.checkbox,
.radio {
  padding: 0 !important;
  border: 1px solid #e5e5e5;
}

.checkbox + .checkbox,
.radio + .radio {
  border-top: none;
}

.form-group .checkbox:first-child,
.form-group .checkbox:first-child label,
.form-group .radio:first-child,
.form-group .radio:first-child label {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.form-group .checkbox:last-child,
.form-group .checkbox:last-child...