:checked 를 이용하여 input type radio, checkbox 클릭 시 디자인 바꿔주기

HTML/CSS 프로젝트를 진행하며 js 없이 버튼 효과를 줄 수 있는 방법을 찾아 헤맸다.

처음 찾은 방법은 :active 였는데 액티브는 버튼을 클릭하는 순간만의 효과를 줄 수 있다.

 

---

📃작성예시📃

 

🎈 기본 CSS 설정

[type="radio"]{
    appearance: none;
    border: 1px solid #c4c4c4;
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

[type="radio"]:checked{
    border: 7px solid var(--primary-color);
    background: #c4c4c4;
}

[type="radio"] 라디오 속성을 가진 모든 태그에 적용

 

apprearance : none; 으로 기본 디자인을 제거 해주었다.

그 외 border-radius 로 모양을 잡아주고 width, height 로 크기조절, border 설정을 해주었다.

 

버튼을 클릭했을 때에는 배경색을 회색으로 바꾸고 보라색은 border 를 두껍게 주어 표현했다.

 

 

🎈 이미지를 사용하기

.agree-button{
    appearance: none;
    background: url(./../../imgs/Input/Check.png) no-repeat;
    width: 24px;
    height: 24px;
    background-position: -8px -8px;
}

.agree-button:checked{
    appearance: none;
    background: url(./../../imgs/Input/Check.png) no-repeat;
    width: 24px;
    height: 24px;
    background-position: -8px -40px;
}​

이미지를 사용하는 것도 어렵지 않다.!

 

똑같이 appearance : none; 을 작성해 기존 버튼을 제거해주었다.

width, height 크기 값을 주고 이미지 첨부, no-repeat 으로 한 번만 보이게 해주었다.

 

두 가지 디자인의 버튼이 같이 있는 sprite 이미지를 사용해주었기 때문에 background-position 값을 줘 위치를 조절해주었다.

 

:checked 에도 똑같은 값들을 준 뒤, sprite 이미지의 위치만 조절해주었다.

만약 다른 파일의 이미지를 가지고 있다면 다른 이미지 파일을 background 로 설정해주면 된다.