<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h3>
Product Block
</h3>
<form class="form-horizontal">
<!-- Multiple Radios -->
<div class="form-group">
<label class="col-md-4 control-label" for="product_id">Enable Blocks</label>
<div class="col-md-4">
<label class="label-switch switch-primary">
<input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
<span class="lable"></span></label>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Block Title</label>
<div class="col-md-4">
<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Identifier</label>
<div class="col-md-4">
<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Select Multiple -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectmultiple">Store view</label>
<div class="col-md-4">
<select id="selectmultiple" name="selectmultiple" class="form-control" multiple="multiple">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Text Area</label>
<div class="col-md-4">
<textarea class="form-control" id="textarea" name="textarea">default text</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton">Single Button</label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
</div>
</div>
</form>
.switch{
opacity: 0;
position: absolute;
z-index: 1;
width: 18px;
height: 18px;
cursor: pointer;
}
.switch + .lable{
position: relative;
display: inline-block;
margin: 0;
line-height: 20px;
min-height: 18px;
min-width: 18px;
font-weight: normal;
cursor: pointer;
}
.switch + .lable::before{
cursor: pointer;
font-family: fontAwesome;
font-weight: normal;
font-size: 12px;
color: #32a3ce;
content: "\a0";
background-color: #FAFAFA;
border: 1px solid #c8c8c8;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 0;
display: inline-block;
text-align: center;
height: 16px;
line-height: 14px;
min-width: 16px;
margin-right: 1px;
position: relative;
top: -1px;
}
.switch:checked + .lable::before {
display: inline-block;
content: '\f00c';
background-color: #F5F8FC;
border-color: #adb8c0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
/* CSS3 on/off switches */
.switch + .lable {
margin: 0 4px;
min-height: 24px;
}
.switch + .lable::before {
font-weight: normal;
font-size: 11px;
line-height: 17px;
height: 20px;
overflow: hidden;
border-radius: 12px;
background-color: #F5F5F5;
-webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
border: 1px solid #CCC;
text-align: left;
float: left;
padding: 0;
width: 52px;
text-indent: -21px;
margin-right: 0;
-webkit-transition: text-indent .3s ease;
-o-transition: text-indent .3s ease;
transition: text-indent .3s ease;
top: auto;
}
.switch.switch-bootstrap + .lable::before {
font-family: FontAwesome;
content: "\f00d";
box-shadow: none;
border-width: 0;
font-size: 16px;
background-color: #a9a9a9;
color: #F2F2F2;
width: 52px;
height: 22px;
line-height: 21px;
text-indent: 32px;
-webkit-transition: background 0.1s ease;
-o-transition: background 0.1s ease;
transition: background 0.1s ease;
}
.switch.switch-bootstrap + .lable::after {
content: '';
position: absolute;
top: 2px;
left: 3px;
border-radius: 12px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
width: 18px;
height: 18px;
text-align: center;
background-color: #F2F2F2;
border: 4px solid #F2F2F2;
-webkit-transition: left 0.2s ease;
-o-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.switch.switch-bootstrap:checked + .lable::before {
content: "\f00c";
text-indent: 6px;
color: #FFF;
border-color: #b7d3e5;
}
.switch-primary >.switch.switch-bootstrap:checked + .lable::before {
background-color: #337ab7;
}
.switch.switch-bootstrap:checked + .lable::after {
left: 32px;
background-color: #FFF;
border: 4px solid #FFF;
text-shadow: 0 -1px 0 rgba(0, 200, 0, 0.25);
}
