/*!
 * ie8不支持:checked选择符, 同时也不支持::before,::after(但支持:before,:after), 因此IE8仍然显示原生的样式, 操作不受影响<br>
 * 依赖font-awesome.css, 不依赖bootstrap.css
 * zhaohuihua 2016-09-17
 
 	-- textless
 	<div class="text-center">
 		<label class="checkbox textless"><input type="checkbox" /><span class="bs-check"></span></label>
	</div>
 		无文字又需要居中对齐的最好在label上加注textless
 		因为label的左边距是20px, checkbox/radio的框只有17px, 加注textless之后将label的左边距改为17px
 	-- 单个checkbox:
 	<div class="text-center">
		<label class="checkbox"><input type="checkbox" /><span class="bs-check">全选</span></label>
	</div>
 	<div class="text-center">
		<label class="radio"><input type="radio" /><span class="bs-check"><!-- 即使没有文字必须要有span --></span></label>
	</div>
	-- 放在form或row中的checkbox: (注意,不适合于text-align:center;)
	<form class="form-horizontal" role="form">
		<div class="form-group">
			<label class="col-md-4 col-sm-3 control-label">性别</label>
			<div class="col-md-5 col-sm-7">
				<div class="row radio">
					<label class="col-xs-4"><input type="radio" name="gender" /><span class="bs-check">男</span></label>
					<label class="col-xs-4"><input type="radio" name="gender" /><span class="bs-check">女</span></label>
					<label class="col-xs-4"><input type="radio" name="gender" /><span class="bs-check">保密</span></label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-4 col-sm-3 control-label">兴趣爱好</label>
			<div class="col-md-5 col-sm-7">
				<div class="row checkbox">
					<label class="col-xs-3"><input type="checkbox" name="hobbies" /><span class="bs-check">旅游</span></label>
					<label class="col-xs-3"><input type="checkbox" name="hobbies" /><span class="bs-check">看书</span></label>
					<label class="col-xs-3"><input type="checkbox" name="hobbies" /><span class="bs-check">花钱</span></label>
					<label class="col-xs-3"><input type="checkbox" name="hobbies" /><span class="bs-check">宅着</span></label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-5 col-sm-7 checkbox">
				<label> <input type="checkbox" class="bs-check"/><span class="bs-check">Remember me</span> </label>
			</div>
		</div>
	</form>
 */

.radio label, .checkbox label {
	position: relative;
}
label.radio, label.checkbox {
	position: relative;
	padding-left: 20px;
	text-align: left;
	display:inline;
}
label.radio.textless, label.checkbox.textless {
	padding-left: 17px;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
	position: absolute;
	line-height: normal;
	padding: 0;
	margin: 4px 0 0 -20px;
	box-sizing: border-box;
}
label.checkbox.textless input[type="checkbox"],
label.radio.textless input[type="radio"],
.checkbox label.textless input[type="checkbox"],
.radio  label.textless input[type="radio"] {
	margin-left: -17px;
}

input[type="checkbox"] + .bs-check::before,
input[type="checkbox"] + .bs-check::after,
input[type="radio"] + .bs-check::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px; height: 17px; line-height: 17px;
  left: 0px; top: 2px;
  box-sizing: border-box;
}
input[type="radio"] + .bs-check::after {
  display: inline-block;
  position: absolute;
  content: " ";
  width: 11px;
  height: 11px;
  left: 3px;
  top: 5px;
  border-radius: 50%;
  background-color: #555555;
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  box-sizing: border-box;
}
input[type="checkbox"] + .bs-check::before,
input[type="radio"] + .bs-check::before {
  border: 1px solid #BBBBBB;
  background-color: #fff;
}
input[type="checkbox"] + .bs-check::before {
  border-radius: 3px;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
input[type="radio"] + .bs-check::before {
  border-radius: 50%;
  -webkit-transition: border 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out;
  transition: border 0.15s ease-in-out;
}
input[type="checkbox"] + .bs-check::after {
  font-size: 13px;
  color: #555555;
  text-align: center;
}
input[type="checkbox"]:focus + .bs-check::before,
input[type="radio"]:focus + .bs-check::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
input[type="checkbox"]:checked + .bs-check::after {
   font-family: "FontAwesome";
  content: "\f00c";
}
input[type="radio"]:checked + .bs-check::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
input[type="checkbox"]:disabled + .bs-check,
input[type="radio"]:disabled + .bs-check {
  /* opacity: 0.65;  filter: alpha(opacity=65); */
}
input[type="checkbox"]:disabled + .bs-check::before,
input[type="radio"]:disabled + .bs-check::before {
  background-color: #F4F4F4;
  border-color: #DDDDDD;
}
input[type="checkbox"]:disabled + .bs-check::before,
input[type="radio"]:disabled + .bs-check::before,
input[type="checkbox"]:disabled + .bs-check::after,
input[type="radio"]:disabled + .bs-check::after {
  cursor: not-allowed;
}

input[type="checkbox"]:checked + .bs-check.bg-primary::before {
  background-color: #337ab7;
  border-color: #337ab7;
}

input[type="checkbox"]:checked + .bs-check.bg-danger::before {
  background-color: #d9534f;
  border-color: #d9534f;
}

input[type="checkbox"]:checked + .bs-check.bg-info::before {
  background-color: #5bc0de;
  border-color: #5bc0de;
}

input[type="checkbox"]:checked + .bs-check.bg-warning::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}

input[type="checkbox"]:checked + .bs-check.bg-success::before {
  background-color: #5cb85c;
  border-color: #5cb85c;
}

input[type="checkbox"]:checked + .bs-check.bg-primary::after,
input[type="checkbox"]:checked + .bs-check.bg-danger::after,
input[type="checkbox"]:checked + .bs-check.bg-info::after,
input[type="checkbox"]:checked + .bs-check.bg-warning::after,
input[type="checkbox"]:checked + .bs-check.bg-success::after {
  color: #fff;
}

input[type="radio"]:checked + .bs-check.bg-primary::before {
  border-color: #337ab7;
}
input[type="radio"]:checked + .bs-check.bg-primary::after {
  background-color: #337ab7;
}

input[type="radio"]:checked + .bs-check.bg-danger::before {
  border-color: #d9534f;
}
input[type="radio"]:checked + .bs-check.bg-danger::after {
  background-color: #d9534f;
}

input[type="radio"]:checked + .bs-check.bg-info::before {
  border-color: #5bc0de;
}
input[type="radio"]:checked + .bs-check.bg-info::after {
  background-color: #5bc0de;
}

input[type="radio"]:checked + .bs-check.bg-warning::before {
  border-color: #f0ad4e;
}
input[type="radio"]:checked + .bs-check.bg-warning::after {
  background-color: #f0ad4e;
}

input[type="radio"]:checked + .bs-check.bg-success::before {
  border-color: #5cb85c;
}
input[type="radio"]:checked + .bs-check.bg-success::after {
  background-color: #5cb85c;
}