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

最新推荐文章于 2024-09-10 12:58:32 发布

lynachen

最新推荐文章于 2024-09-10 12:58:32 发布

阅读量2.2k

点赞数

文章标签： css

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

本文链接：https://blog.csdn.net/Julylyna/article/details/81665270

版权

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

效果如下：