[CSS] label, background-image없이 체크박스 CSS 적용하기

 

input checkbox에 바로 CSS를 먹이면 적용이 안된다.

그래서 찾아보니 죄다 Label 코드를 input과 연결해서 작업하는 방식이었다.

<input type="checkbox" id="test"><label for="test"></label>

input[type="checkbox"]+label{
	display: inline-block;
	background-image : url('이미지주소');
	width: 20px;
	height: 20px;
	cursor: pointer;
	vertical-align: middle;
	margin : 2px
}

input[type="checkbox"]:checked + label{
 	background-image : url('이미지주소'); 
 	width: 20px;
	height: 20px; 
	vertical-align: middle;
}

 

문제는 이미 구현해놓은 코드가 많아서 label코드를 하나하나 추가할 수 없었다. 

구글링하다가 바로 CSS 적용을 할 수 있는 블로그를 찾아서 적용했다.

https://lifeiseggs.tistory.com/1204

[css] 체크박스

https://velog.io/@chumil7432/CSS-checkbox%EC%99%80-select-%EA%BE%B8%EB%AF%B8%EA%B8%B0

[CSS] checkbox와 select 꾸미기

 

위 블로그처럼 구현하면 라벨(label) 태그나 백그라운드 이미지(background-image) 처리 없이 CSS변경이 가능하다.

 

input[type="checkbox"]{
	-webkit-appearance: none;
	box-sizing: border-box;
    position: relative;
    width: 16px;
    height: 16px;
    cursor: pointer;
    outline: none !important;
    border-radius: 2px;
    vertical-align: middle;
    background-color: #081728;
    margin: 4px;
} 

input[type="checkbox"]::before {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: scale(0) translate(-50%, -50%);
    line-height: 1;
}

input[type="checkbox"]:checked{
	background-color: #3B6FF3;
	color: white;
}

input[type="checkbox"]:checked::before {
    border-radius: 2px;
    transform: scale(1) translate(-50%, -50%);
}

input[type="checkbox"][disabled] {
    background-color: #081728;
}

 

체크 전 / 후