[CSS] checkbox css 체크모양 변경

html

<tr>
    <td style="text-align: center;">관심분야</td>
    <td>
        <div class="interest">
            <input type="checkbox" name="interest" value="1" id="i1"><label for="i1">웹디자인</label>
            <input type="checkbox" name="interest" value="2" id="i2"><label for="i2">프론트엔드</label>
            <input type="checkbox" name="interest" value="3" id="i3"><label for="i3">백엔드</label><br><br>
            <input type="checkbox" name="interest" value="4" id="i4"><label for="i4">데이터베이스</label>
            <input type="checkbox" name="interest" value="5" id="i5"><label for="i5">데브옵스</label>
            <input type="checkbox" name="interest" value="6" id="i6"><label for="i6">기획</label>
            <input type="checkbox" name="interest" value="7" id="i7"><label for="i7">운영</label>
        </div>
    </td>
</tr>

 
 
css

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

 
결과

 
클릭시