自定义radio与checkbox的样式

最新推荐文章于 2024-04-13 15:06:32 发布

soosgo

最新推荐文章于 2024-04-13 15:06:32 发布

阅读量3.9k

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/Doulvme/article/details/53942276

版权

CSS 同时被 2 个专栏收录

37 篇文章 2 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

由于input中的radio与checkbox的样式比较单一而且样式不是很美观，所以我们一般都想定义一个自己比较喜欢的样式，偶然发现这种自定义方法比较容易理解，在此特意分享一下：

首先是自定义单选框样式及复选框样式具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>split方法</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.one{
				margin: 50px;
			}
			.one input[type='radio']{
				margin-left: 2px;
				margin-right: 2px;
				display: none;
			}
			.one input[type='radio']+label:before{
				content: '';
				display: inline-block;
				width: 10px;
				height: 10px;
				margin-right: 5px;
				border-radius: 100%;
				vertical-align: middle;
				border: 2px solid #E4E4E4;
				background: #F9F9F9;
			}
			.one input[type='radio']:checked+label:before{
				background: #777777;
			}
			
			.one input[type='checkbox']{
				display: none;
			}
			.one input[type='checkbox']+label:before{
				content: '';
				width: 10px;
				height: 10px;
				vertical-align: middle;
				margin-right: 5px;
				display: inline-block;
				background: #F9F9F9;
				border: 2px solid #CCCCCC;
			}
			.one input[type='checkbox']:checked+label:before{
				background: lightcoral;
			}
			
		</style>
	</head>
	<body>
		<!--radio-->
		<div class="one" id="one">
			<input type="radio" name="pay" id="p_yes" class="rdo"/>
			<label for="p_yes">是</label>
			<input type="radio" name="pay" id="p_no" class="rdo"/>
			<label for="p_no">否</label>
		</div>
		<!--checkbox-->
		<div class="one">
			<input type="checkbox" name="fav" id="book" class="rdo"/>
			<label for="book">Book</label>
			<input type="checkbox" name="fav" id="run" class="rdo"/>
			<label for="run">Run</label>
			<input type="checkbox" name="fav" id="music" class="rdo"/>
			<label for="music">Music</label>
			<input type="checkbox" name="fav" id="ktv" class="rdo"/>
			<label for="ktv">KTV</label>
			<input type="checkbox" name="fav" id="swimming" class="rdo"/>
			<label for="swimming">swimming</label>
		</div>	
	</body>
</html>

效果图如下：