input type='radio'(:after)

🚨 input 라디오 버튼을 사용하여 버튼 클릭 시 css를 적용하고 싶어서 찾아보다 알게된 가상요소 before, after 이해하기!

• :before - 해당 엘리먼트 앞에 가상 콘센츠 삽입
• :after - 해당 엘리먼트 뒤에 가상 콘텐츠 삽입

가상요소 before/after을 사용할 때 꼭 content 속성을 함께 사용한다.

content='';

html에는 존재하지 않고 css에만 존재하는 가상요소이기 때문에 js로 제어하기엔 어려움이 있고 content 값에 텍스트나 이미지 등을 넣어 css만으로 가상 요소를 추가할 수 있다.

해결 방법

우선 radio의 appearance를 none으로 변경하여 처음부터 내가 원하는 모양으로 만들어준다.
checked 상태일 때를 설정한다.

.checks input[type="radio"] {
    -webkit-appearance: none;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1px solid black;
    margin-right: 15px;
}

.checks input[type="radio"]:checked:after {
    background: #111;
    content: "";
    width: 19px;
    height: 19px;
    border-radius: 50%;
    margin: 1px;
    display: block;
}

⭐️ 완성!