라디오 버튼을 구현하기 위한 필기 CSS+js

이 글은 라디오 버튼의 손글씨 CSS+js 구현을 소개합니다. 이는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

때로는 더 예쁜 라디오 버튼을 사용해야 할 때도 있고, 그러면 원래 버튼을 버리고 작성해야 합니다. 제가 구현한 것은 다음과 같습니다.

<p class="radio"><span class="yuan rdactive"><span></span></span>你丑你先</p>
	<p class="radio"><span class="yuan"><span></span></span>你才丑你先</p>
<p class="radio"><span class="yuan"><span></span></span>你更丑你先</p>

	.radio{
		display: flex;
		align-items: center;
		width: 100px;
		cursor: pointer;
	}
	.yuan{/*大圈*/
		display: block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #ececec;/*这里写自己喜欢的颜色*/
		display: flex;
		align-items: center;
		margin-right: 5px;
	}
	.radio>span.rdactive{
		background: #EF6121;/*这里写自己喜欢的颜色*/
	}
	.yuan span{/*小圈*/
		display: block;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: white;/*这里写自己喜欢的颜色*/
		margin: 0 auto;
	}　

$(".radio").children('.yuan').on('click',function(){
	$('.rdactive').removeClass('rdactive');
	$(this).addClass("rdactive").siblings().removeClass("rdactive");
})

Rendering:

좋아, 여기에서 달성할 수 있습니다. 아주 간단하지 않나요? 직접 시도해 볼 수 있어요!

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 비디오 튜토리얼

CSS 온라인 매뉴얼

div/css 그래픽 튜토리얼

위 내용은 라디오 버튼을 구현하기 위한 필기 CSS+js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!