<ul class="radio-list">
	<li>
		<label class="test-radio test-error">
			<input type="radio" name="11">to,toward
		</label>
	</li>
	<li>
		<label class="test-radio checked">
			<input type="radio" name="11">to,toward
		</label>
	</li>
	<li>
		<label class="test-radio">
			<input type="radio" name="11">to,toward
		</label>
	</li>
	<li>
		<label class="test-radio">
			<input type="radio" name="11">to,toward
		</label>
	</li>
</ul>

.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);
}