active的三种写法代替radio和checkbox

最新推荐文章于 2022-11-03 11:07:25 发布

qq_43078433

最新推荐文章于 2022-11-03 11:07:25 发布

阅读量488

点赞数

文章标签： jquery javascript css html5 html

本文链接：https://blog.csdn.net/qq_43078433/article/details/105044982

版权

本文展示了如何利用JavaScript、CSS和HTML创建类似radio和checkbox的active状态效果，通过实例代码帮助读者理解实现过程。

摘要由CSDN通过智能技术生成

效果图:

话不多说,直接上代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="author" content="2635121987@qq.com">
		<title>active的三种写法代替radio和checkbox</title>
	</head>
	<style type="text/css">
		*,
		ul,
		li {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		div {
			width: 400px;
			margin: auto;
		}
		
		ul {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 30px;
		}
		
		ul>li {
			width: 50px;
			border: 1px solid #000;
			border-radius: 5px;
			text-align: center;
			line-height: 30px;
		}
		
		.active {
			background: url(demo_img/ico_checkon.png) no-repeat right bottom;
			border: 1px solid #b85e17!important;
			background-size: 18px