单选、多选样式美化

最新推荐文章于 2023-08-15 17:04:31 发布

-Always-

最新推荐文章于 2023-08-15 17:04:31 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：单选美化多选美化

本文链接：https://blog.csdn.net/u012836656/article/details/89237968

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

今天空了，特意把常见的单选、多选美化下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多选框样式</title>
	<style>
		*{ margin: 0; padding: 0; }
		body{
			font-family: 'Microsoft Yahei',sans-serif,arial;
			font-size: 14px;
			line-height: 150%;
			color: #333;
			background: #fff;
		}
		h1,h2,h3,h4,h5,h6{ font-weight: normal;}

		#main{ padding: 20px; }
		h1{ line-height: 30px; margin: 10px 0; font-size: 18px; color: #e05858;}
		.item{ margin-bottom: 10px; }
		p{ line-height: 28px; font-size: 16px;}
		.ordinary{ color: #d09517;}
		.beautify{ color: #fb9049;}
		.fruit-box{ display: inline-block; line-height: 24px; margin-right: 20px; cursor: pointer; }
		label input{ vertical-align: top; margin-top: 6px; margin-right: 3px; }
		.m-check,.m-radio{ display: inline-block; line-height: 24px; margin-right: 20px; cursor: pointer; }
		.icon-check,.icon-radio{ display: inline-block; float: left; width: 18px; height: 18px; background: url(../images/icon.png) no-repeat 0 -100px; margin-top: 3px; margin-right: 5px; }
		.checked .icon-check{ background: url(../images/icon.png) no-repeat 0 -140px; }
		.icon-radio{ background: url(../images/icon.png) no-repeat 0 0;}
		.checked .icon-radio{ background: url(../images/icon.png) no-repeat 0 -40px; }
	</style>
</head>
<body>
	<div id="main">
		<h1>复选框:</h1>
		<div class="item">
			<p class="ordinary">常规：</p>
			<!-- for属性与id一致，点击文字时也可以选择复选框 -->
			<label class="fruit-box" for="fruit_11"><input id="fruit_11" name="fruit" type="checkbox" />苹果</label>
			<label class="fruit-box" for="fruit_22"><input id="fruit_22" name="fruit" type="checkbox" />橘子</label>
			<label class="fruit-box" for="fruit_33"><input id="fruit_33" name="fruit" type="checkbox" />香蕉</label>
		</div>
		<div class="item">
			<p class="beautify">美化：</p>
			<label class="m-check"><i class="icon-check"></i><span class="check-text">苹果</span></label>
			<label class="m-check"><i class="icon-check"></i><span class="check-text">橘子</span></label>
			<label class="m-check"><i class="icon-check"></i><span class="check-text">香蕉</span></label>
		</div>

		<h1>单选框:</h1>
		<div class="item">
			<p class="ordinary">常规：</p>
			<!-- for属性与id一致，点击文字时也可以选择复选框 -->
			<label class="fruit-box" for="fruit_44"><input id="fruit_44" name="fruit1" type="radio" />苹果</label>
			<label class="fruit-box" for="fruit_55"><input id="fruit_55" name="fruit1" type="radio" />橘子</label>
			<label class="fruit-box" for="fruit_66"><input id="fruit_66" name="fruit1" type="radio" />香蕉</label>
		</div>
		<div class="item">
			<p class="beautify">美化：</p>
			<label class="m-radio"><i class="icon-radio"></i><span class="radio-text">苹果</span></label>
			<label class="m-radio"><i class="icon-radio"></i><span class="radio-text">橘子</span></label>
			<label class="m-radio"><i class="icon-radio"></i><span class="radio-text">香蕉</span></label>
		</div>
	</div>
	<script src="js/jquery-1.10.2.min.js"></script>
	<script>
		$(function(){
			//复选框选择
			$(".m-check").on('click',function(){
				$(this).toggleClass('checked');
			})
			// 单选框选择
			$(".m-radio").on('click',function(){
				$(this).addClass('checked');
				$(this).siblings(".m-radio").removeClass('checked');
			})
		})
	</script>
</body>
</html>

-Always-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单选、多选样式美化

今天空了，特意把常见的单选、多选美化下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多选框样式</title> <style> *{ margin: 0; padding: 0; } body{ ...
复制链接

扫一扫