[SCSS] input[type="radio"] 커스텀하기

위 toggle 버튼을 radio 버튼으로 변경해야 해서 커스텀을 해야하는데

내가 원하는 모양은 다음과 같았다

 

아래 코드를 작성해서 커스텀을 시도했지만 결과는 생각처럼 잘나오지 않았다🤔

.radio-button {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 400;

	input[type="radio"] {
		width: 20px;
		height: 20px;
		margin: 0;
		border: 1px solid #d1d6db;
		cursor: pointer;
	}

	input[type="radio"]:checked {
		background-color: #3182f6; // 체크 시 내부 원으로 표시될 색상
		border: 5px solid #3182f6; // 테두리가 아닌, 테두리와 원 사이의 색상
	}
}

 

해결방법

아래 코드를 적용하면 원하는대로 커스텀이 가능하다

.radio-button {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 400;
    
    	input[type="radio"] {
		appearance: none;
		width: 20px;
		height: 20px;
		margin: 0;
		border: 1px solid #d1d6db;
		border-radius: 50%;
		position: relative;
		cursor: pointer;
	}

	input[type="radio"]:checked {
		border: 5px solid #3182f6; /* 테두리와 원 사이의 색상 */
	}

	input[type="radio"]::before {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		visibility: hidden;
	}

	input[type="radio"]:checked::before {
		visibility: visible;
	}
}

 

radio 버튼이 생각처럼 적용안되서 해메는 분들에게 도움이 되길..