纯css美化checkbox和radio及选中效果

最新推荐文章于 2025-05-28 14:03:39 发布

lynachen

最新推荐文章于 2025-05-28 14:03:39 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/Julylyna/article/details/81665270

本文介绍如何使用CSS自定义HTML中的复选框与单选按钮的外观，包括改变尺寸、颜色及选中状态的效果，并通过jQuery实现交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<div class="checkbox">
		<input type="checkbox">
		<label for="">全选</label>
	</div>

	<div class="radio">
		<div class="female">
			<input type="radio" id="female" name="sex" value="1" />
			<label for="female">女</label>
		</div>
		<div class="male">                
			<input type="radio" id="male" name="sex" value="2" />
			<label for="male">男</label>
		</div>
	</div>

		input[type="checkbox"],
		input[type="radio"] {
			width: 20px;
			height: 20px;
			background-color:#fff;
			-webkit-appearance:none;
			border:1px solid #c9c9c9;
			border-radius: 2px;
			outline: none;
		}
		input[type="radio"] {border-radius: 50%;}
		input[type="checkbox"]:checked,
		input[type="radio"]:checked {
			background-color: #ff7800;
			border-color: #ff7800;
			background-clip: content-box;
			padding:2px;
		}

			$("input[type='checkbox']").click(function(){
				var check = $(this).attr("checked");
				if(check){	
					$(this).removeAttr("checked");
				}else{	
					$(this).attr("checked","checked");
				}
			})

效果如下：