เวอร์ชั่น 1.0 by bootstrap 3.3.7
<form data-toggle="validator" role="form" class="form-default" method="post">
<div class="form-group has-feedback">
<label class="control-label">Label</label>
<div class="block-control">
<input class="form-control"
type="text"
id=""
name=""
value=""
placeholder=""
data-error=""
required="">
<span class="form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<label class="control-label">Label</label>
<div class="block-control">
<textarea class="form-control"
rows="6"
id=""
name=""
value=""
placeholder=""
data-error=""
required=""></textarea>
<span class="form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<div class="radio-list">
<ul class="item-list">
<li>
<div class="radio-control">
<input type="radio" name="rb">
<div class="icon"></div>
<h4 class="title">radio button</h4>
</div>
</li>
<li>
<div class="radio-control">
<input type="radio" name="rb">
<div class="icon"></div>
<h4 class="title">radio button</h4>
</div>
</li>
<li>
<div class="radio-control">
<input type="radio" name="rb">
<div class="icon"></div>
<h4 class="title">radio button</h4>
</div>
</li>
<li>
<div class="radio-control">
<input type="radio" name="rb">
<div class="icon"></div>
<h4 class="title">radio button</h4>
</div>
</li>
</ul>
</div>
</div>
<div class="form-group">
<div class="checkbox-list">
<ul class="item-list">
<li>
<div class="checkbox-control">
<input type="checkbox" name="cb">
<div class="icon"></div>
<h4 class="title">checkbox</h4>
</div>
</li>
<li>
<div class="checkbox-control">
<input type="checkbox" name="cb">
<div class="icon"></div>
<h4 class="title">checkbox</h4>
</div>
</li>
<li>
<div class="checkbox-control">
<input type="checkbox" name="cb">
<div class="icon"></div>
<h4 class="title">checkbox</h4>
</div>
</li>
<li>
<div class="checkbox-control">
<input type="checkbox" name="cb">
<div class="icon"></div>
<h4 class="title">checkbox</h4>
</div>
</li>
</ul>
</div>
</div>
</form>
<form data-toggle="validator" role="form" class="form-default" method="post">
<div class="form-group has-feedback">
<div class="block-control">
<input class="form-control"
type="text"
id=""
name=""
value=""
placeholder=""
data-error=""
required="">
<span class="floating-label">Label</span>
<span class="form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="block-control">
<textarea class="form-control"
rows="6"
id=""
name=""
value=""
placeholder=""
data-error=""
required=""></textarea>
<span class="floating-label">Label</span>
<span class="form-control-feedback" aria-hidden="true"></span>
</div>
</div>
</form>
.form-default .form-group{position: relative; margin-bottom: 20px;}
.form-2 .form-default .form-group{position: relative; margin-bottom: 35px;}
.form-default .control-label{margin-bottom: 10px; font-weight: normal; font-size: 14px; color: #333; line-height: 1.2em;}
.form-default .form-control{line-height: 1.2em;
padding: 10px 15px;
font-size: 14px;
color: #333;
min-height: 40px;
background-color: #fff;
border: 1px solid #ccc;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.form-default .form-note{position: absolute; top: 100%; left: 20px; margin-top: 4px; font-size: 14px; color: #999;}
.form-default .form-control:focus{border-color: #333;}
.form-default .block-control{position: relative;}
.form-default .has-error .form-control:focus{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.form-default .has-success .form-control:focus{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.form-default .floating-label{color: #333; font-size: 14px; position: absolute; pointer-events: none; left: 15px; top: 9px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.form-default .form-control:focus ~ .floating-label,
.form-default .form-control:not(:focus):valid ~ .floating-label{color: #333; font-size: 12px; left: 0; top: -22px;}
.form-control-feedback{position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background-size: 100%;}
.form-control-feedback:before{display: none;}
.form-control-feedback.glyphicon-ok{
background: url('public/image/icon/checked.png') center no-repeat;
background-size: 16px;
}
.form-control-feedback.glyphicon-remove{
background: url('public/image/icon/cancel.png') center no-repeat;
background-size: 16px;
}
.form-default .radio-list li + li{margin-left: 40px;}
.form-default .checkbox-list li + li{margin-left: 40px;}
.radio-control{position: relative; display: inline-block; min-height: 34px; padding-left: 0;}
.radio-control .icon{width: 20px; height: 20px; border: 1px solid #ccc; background-color: #fff;
position: absolute;
top: 10px;
left: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.radio-control .title{margin: 0; font-size: 16px; font-weight: normal; color: #333; padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
display: block;
}
.radio-control input[type='radio']{margin-top: 0; position: absolute; z-index: 5; opacity: 0; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer;}
.radio-control input[type='radio']:checked ~ .icon{border-color: transparent; border-color: #333;}
.radio-control input[type='radio']:checked ~ .icon:before{content: ''; position: absolute; width: 10px; height: 10px; left: 0; top: 0; right: 0; bottom: 0; margin: auto;
background-color: #333;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.radio-label{position: absolute;
bottom: 100%;
line-height: 1em;
font-size: 20px;
color: #6bb953;
font-weight: 500;
}
.checkbox-control{position: relative; display: inline-block;}
.checkbox-control .icon{width: 20px; height: 20px; border: 1px solid #ccc; background-color: #fff;
position: absolute;
top: 10px;
left: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.checkbox-control .title{margin: 0; font-size: 16px; font-weight: normal; color: #333; padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
display: block;
}
.checkbox-control input[type='checkbox']{margin-top: 0; position: absolute; z-index: 5; opacity: 0; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer;}
.checkbox-control input[type='checkbox']:checked ~ .icon{border-color: transparent; background-color: #333;}
.checkbox-control input[type='checkbox']:checked ~ .icon:before{content: ''; position: absolute; width: 18px; height: 18px;
background: url('public/image/icon/checkbox.png') center no-repeat;
background-size: 12px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}