radio button style 변경

아래 코드는 radio button style을 변경하는 방법으로, check butto style 변경도 아래와 유사합니다!

input[type=radio]:checked {
    background: #B331E7;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: #000000 1px solid;
    border-radius: 100%;
    margin-right: 3px;
    width: 16px;
    height: 16px;
}

input[type=radio] {
    background: #FFFFFF;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: #B331E7 1px solid;
    border-radius: 100%;
    margin-right: 3px;
    width: 16px;
    height: 16px;
}

 

이미지를 추가하여 radio button style을 변경할 때는 다음과 같이 작성합니다.

input[type=radio]:checked {
    background: url(../images/btn/radio/on.png);
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    margin-right: 3px;
    width: 16px;
    height: 16px;
}

input[type=radio] {
    background: url(../images/btn/radio/off.png);
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    margin-right: 3px;
    width: 16px;
    height: 16px;
}