CSS+js manuscrits pour implémenter le bouton radio

Cet article présente les CSS+js manuscrits pour implémenter le bouton radio. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Parfois, nous devons utiliser des boutons radio plus jolis, nous devons alors abandonner celui d'origine et l'écrire. Voici ce que j'ai implémenté

<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");
})

Rendu : <.>

D'accord, vous pouvez l'implémenter ici. N'est-ce pas très simple ? Vous pouvez l'essayer vous-même !

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo CSS  !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne CSS

Tutoriel graphique div/css

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!