Stylish Checkboxes using HTML and CSS

checkbox, stylish checkbox, sliding checkbox, kas-checks

by Kanha Sahu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
  <section>
  <div class="row" style="margin:2px 5px">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#view_10000001" data-toggle="tab">Example View</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane fade in active" id="view_10000001">


        <div class="table-responsive kaslab">
          <table class="table-bordered table-hover table-striped" width="100%" cellpadding="">
            <thead>
              <tr>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <!--         
                 <tr>
                     <td></td>
                     <td></td>
                    </tr>  
                    
                -->
              <tr>
                <td class="text-center" valign="middle">
                  <div class="kas-checks-slideOne">
                    <input type="checkbox" name="Status1" class="" id="slide1" checked="checked">
                    <label for="slide1"></label>
                  </div>
                </td>
                <td class="text-left">
                  <pre class="no-margin" lang="html">
&lt;div class=&quot;kas-checks-slideOne&quot;&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;Status1&quot; class=&quot;&quot; id=&quot;slide1&quot; checked=&quot;checked&quot;&gt;
&lt;label for=&quot;slide1&quot;&gt;&lt;/label&gt;
&lt;/div&gt;
</pre>
                </td>
              </tr>
              <tr>
                <td class="text-center" valign="middle">
                  <div class="kas-checks-slideTwo bg-success">
                    <input type="checkbox" name="Status2" class="" id="slide2" checked="checked">
                    <label for="slide2"></label>
                  </div>
               ...

CSS

@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
@import url(//fonts.googleapis.com/css?family=Kaushan+Script);

.kaslab {}

.ksalab-checks input[type=checkbox].hidden,
.effective input[type=checkbox].hidden,
input[type=checkbox].hidden,
.kaslab input[type=checkbox],
.kas-checks-slideOne input[type=checkbox],
.kas-checks-slideTwo input[type=checkbox],
.kas-checks-slideThree input[type=checkbox],
.kas-checks-slideFour input[type=checkbox],
.kas-checks-slideFive input[type=checkbox],
.kas-checks-slideFiveSm input[type=checkbox],
.kas-checks-slideSix input[type=checkbox],
.kas-checks-slideSeven input[type=checkbox],
.kas-checks-slideEight input[type=checkbox],
.kas-checks-slideNine input[type=checkbox],
.kas-checks-slideTen input[type=checkbox],
.kas-checks-roundedOne input[type=checkbox],
.kas-checks-roundedTwo input[type=checkbox],
.kas-checks-roundedThree input[type=checkbox],
.kas-checks-squaredOne input[type=checkbox],
.kas-checks-squaredTwo input[type=checkbox],
.kas-checks-squaredThree input[type=checkbox],
.kas-checks-squaredFour input[type=checkbox],
.kas-checks-squaredFive input[type=checkbox] {
  visibility: hidden;
}

.effective,
.kas-checks-slideOne,
.kas-checks-slideTwo,
.kas-checks-slideThree,
.kas-checks-slideFour,
.kas-checks-slideFive,
.kas-checks-slideFiveSm,
.kas-checks-slideSix,
.kas-checks-slideSeven,
.kas-checks-slideEight,
.kas-checks-slideNine,
.kas-checks-slideTen,
.kas-checks-roundedOne,
.kas-checks-roundedTwo,
.kas-checks-roundedThree,
.kas-checks-squaredOne,
.kas-checks-squaredTwo,
.kas-checks-squaredThree,
.kas-checks-squaredFour,
.kas-checks-squaredFive {
  position: relative;
  color: #eee;
  font: 48px Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0px 1px black;
  text-align: center;
  line-height:...