<ul class="checkbox-list" id="checkList">
					<li>
						<label class="test-check test-error checked">
							<input type="checkbox" name="11">to,toward
						</label>
					</li>
					<li>
						<label class="test-check test-sucess">
							<input type="checkbox" name="11">to,toward
						</label>
					</li>
					<li>
						<label class="test-check checked">
							<input type="checkbox" name="11">to,toward
						</label>
					</li>
					<li>
						<label class="test-check">
							<input type="checkbox" name="11">to,toward
						</label>
					</li>
					<li>
						<label class="test-check checked">
							<input type="checkbox" name="11">to,toward
						</label>
					</li>
					<li>
						<label class="test-check">
							<input type="checkbox" name="11">to,toward
						</label>
					</li>
					<li>
						<label class="test-check">
							<input type="checkbox" name="11">to,toward
						</label>
					</li>
					<li>
						<label class="test-check">
							<input type="checkbox" name="11">to,toward
						</label>
					</li>
				</ul>

.radio-list li{
	margin-bottom: 15px;
}
.radio-list li:last-child{
	margin-bottom: 0;
}

.checkbox-list{
	overflow: hidden;
	margin: 0 -7px;
}
.checkbox-list li{
	float: left;
	width: 50%;
	padding: 7px;
	box-sizing: border-box
}


.test-radio,.test-check{
	display: block;
	box-sizing: border-box;
	padding-left: 50px;
	padding-top: 15px;
	padding-bottom:15px;
	padding-right: 15px;
	border-radius: 5px;
	line-height: 20px;
	position: relative;
	font-size: 16px;
	font-weight: bold;
	color: #333;
	background: #FFFFFF;
}
.test-radio input,
.test-check input{
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 22px;
	height: 22px;
	outline: none;
    border: 0;
    cursor: pointer;
    background-color: transparent;
    -webkit-appearance: none!important;
    outline: 0!important;
}

.checkbox-list .test-radio,.checkbox-list .test-check{
	padding-left: 35px;
}
.checkbox-list .test-radio input,
.checkbox-list .test-check input{
	left: 7px;
}




.test-radio input[type="radio"]::before,
.test-check input[type="checkbox"]::before{
    display: block;
    width: 22px;
	height: 22px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -webkit-appearance: none;
    content: "　";
    text-decoration: none;
    border-radius: 0px;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    background-image: url(../images/ls/ls-radio.png);
}
.test-radio input[type=radio]:checked:before,
.test-check input[type=checkbox]:checked:before {
    background-image: url(../images/ls/ls-radioed.png);
}

.test-radio input[type=radio]:checked:before,
.test-check input[type=checkbox]:checked:before {
    background-image: url(../images/ls/ls-radioed.png);
}

.test-error input[type=radio]:before,
.test-error input[type=checkbox]:before {
    background-image: url(../images/ls/ls-error.png);
}
.test-error input[type=radio]:checked:before,
.test-error input[type=checkbox]:checked:before {
    background-image: url(../images/ls/ls-error.png);
}
.test-sucess input[type=radio]:before,
.test-sucess input[type=checkbox]:before {
    background-image: url(../images/ls/ls-sucess.png);
}
.test-sucess input[type=radio]:checked:before,
.test-sucess input[type=checkbox]:checked:before {
    background-image: url(../images/ls/ls-sucess.png);
}
.test-radio.checked,
.test-check.checked{
	background: #428BFF;
	color: #FFF;
}
.test-radio.test-error{
	background: #f4461f;
	color: #FFF;
}
.test-check.test-error{
	background: #f4461f;
	color: #FFF;
}
.test-radio.test-sucess{
	background: #00db5f;
	color: #FFF;
}
.test-check.test-sucess{
	background: #00db5f;
	color: #FFF;
}