[CSS] radio css 꾸미기

radio 버튼 색 변경

html

<tr>
    <td style="text-align: center;">성별</td>
    <td>
        <input type="radio" name="genger" value="M" id="M"><label for="M">남자</label>
        <input type="radio" name="genger" value="F" id="F"><label for="F">여자</label>
        <input type="radio" name="genger" value="N" id="N" checked><label for="N">비공개</label>
    </td>
</tr>

 
css

input[type='radio'] {
    /* 기본 브라우저에서 기본 스타일 제거 */
    appearance: none; 
    width: 13px;
    height: 13px;
    /* 체크되지 않았을 때의 테두리 색상 */
    border: 1px solid #ccd2ee; 
    border-radius: 50%;
    /* focus 시에 나타나는 기본 스타일 제거 */
    outline: none; 
    cursor: pointer;
}
/* 체크 시 버튼 모양 스타일 */
input[type='radio']:checked {
    /*  체크 시 내부 원 색상 */
    background-color: rgb(53, 85, 180); 
    /* 라인이 아닌, 라인과 원 사이 색상 */
    border: 3px solid #fff; 
    /* 라인 */
    box-shadow: 0 0 0 1px rgb(53, 85, 180); 
}

 
결과물

 
 

radio 모양 바꾸기

html

<tr>
    <td style="text-align: center;">성별</td>
    <td>
        <div class="gender">
            <input type="radio" name="genger" value="M" id="M"><label for="M">남자</label>
            <input type="radio" name="genger" value="F" id="F"><label for="F">여자</label>
            <input type="radio" name="genger" value="N" id="N" checked><label for="N">비공개</label>
        </div>
    </td>
</tr>

 
css

.gender {
    padding: 5px;
}
.gender input[type=radio]{
    display: none;
}
.gender input[type=radio]+label{
    display: inline-block;
    cursor: pointer;
    height: 24px;
    width: 50px;
    border: 1px solid rgb(53, 85, 180);
    border-radius: 5px;
    line-height: 24px;
    text-align: center;
    font-weight:bold;
    font-size:13px;
}
.gender input[type=radio]+label{
    background-color: #fff;
    color: rgb(53, 85, 180);
}
.gender input[type=radio]:checked+label{
    background-color: rgb(53, 85, 180);
    color: #fff;
}

 
결과