본문 바로가기

html & css3

[html/css] input checkbox 디폴트 없애고 css로 꾸미기

반응형
<input type="checkbox" id="click" checked><label for="click"><span></span>체크박스</label>
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label span {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: -2px 10px 0 0;
    vertical-align: middle;
	border-radius: 5px;
    cursor: pointer;
    border: 1px solid red;
}
input[type="checkbox"]:checked + label span {
    background: red;
}

 

 

반응형