input单选框移动端样式

CSS美化单选框

最新推荐文章于 2025-06-26 14:37:47 发布

原创最新推荐文章于 2025-06-26 14:37:47 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#radio单选框选择样式

HTML5 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS和HTML来美化单选框的方法，通过自定义样式和交互效果，实现了一个具有美观外观和良好用户体验的性别选择组件。同时，通过JavaScript实现了单选框的选择状态反馈和按钮点击事件。

input单选框

css代码

		#con{
			overflow: hidden;
			width: 220px;
			position: relative;
		}
		.nan,
		.nv{
			width: 100px;
			height: 60px;
			background: #e3e3e3;
			display: block;
			float: left;
			text-align: center;
			line-height: 60px;
			font-size: 20px;
			color: white;
			font-weight: 700;
		}
		#nan,
		#nv{
			display: none;
		}
		.active{
			background: blue;
		}

HTML代码

	<div id="con">
		<label for="nan" class="nan">男</label>
		<input type="radio" name="sex" id="nan" value="1" />
		<label for="nv" class="nv">女</label>
		<input type="radio" name="sex" id="nv" value="0" />
	</div>
	<button class="btn">
		提交
	</button>

js代码

<script type="text/javascript">
	$('.btn').click(function(){
		var obj = {
		sex:$("#con input[type=radio]:checked").val()
		}
		console.log($("#con input[type=radio]:checked").val())
	})
	$('#con label').click(function(){
		$(this).addClass('active').siblings().removeClass('active')
	})
</script>

在这里插入图片描述