自定义的复选框checkbox

最新推荐文章于 2021-08-03 20:57:31 发布

lvxinaidou

最新推荐文章于 2021-08-03 20:57:31 发布

阅读量213

点赞数

分类专栏： CSS jQuery HTML JavaScript

本文链接：https://blog.csdn.net/lvxinaidou/article/details/97372705

版权

JavaScript 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

自定义的复选框checkbox

1.fontawesome

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>checkbox</title>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<style>
			.checkItem {
				display: inline-block;
				padding:0px 10px;
				cursor: pointer;
			}
			.checkItem > label {
				cursor: pointer;
			}
			.checkItem > i {
				width: 16px;
				height: 16px;
			}
		</style>
	</head>
	<body>
		<div class="checkItem">
			<i class="fa fa-square-o" onclick="btncheckbox(this)"><input type="checkbox" style="display: none;" id="checkbox1" value="0"></i>
			<label for="checkbox1">标段一</label>
		</div>
		<div class="checkItem">
			<i class="fa fa-square-o" onclick="btncheckbox(this)"><input type="checkbox" style="display: none; " id="checkbox2" value="1"></i>
			<label for="checkbox2">标段二</label>
		</div>
		<div class="checkItem">
			<i class="fa fa-square-o" onclick="btncheckbox(this)"><input type="checkbox" style="display: none;" id="checkbox3" value="2"></i>
			<label for="checkbox3">标段三</label>
		</div>
		<div class="checkItem">
			<i class="fa fa-square-o" onclick="btncheckbox(this)"><input type="checkbox" style="display: none;" id="checkbox4" value="3"></i>
			<label for="checkbox4">标段四</label>
		</div>
		
		<script>
			function btncheckbox(dom) {
				//console.log(dom);
				if(dom.classList.contains('fa-square-o')) {
					dom.classList.remove('fa-square-o');
					dom.classList.add('fa-check-square-o');
				}else {
					dom.classList.add('fa-square-o');
					dom.classList.remove('fa-check-square-o');
				}
				console.log($('.fa-check-square-o'));
			}
		</script>
		
	</body>
</html>

运行结果：
在这里插入图片描述

2.css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3美化checkbox</title>
    <style>
        label.bui-checkbox-label input[type="checkbox"]{
            visibility: hidden;
            opacity: 0;
        }
        label.bui-checkbox-label .bui-checkbox{
            display: inline-block;
            position: relative;
            width: 13px;
            height: 13px;
            border: 1px solid #ddd;
            background-color: #fff;
            vertical-align: -2px;
            margin-right: 5px;
        }
        label.bui-checkbox-label input[type="checkbox"]:checked + .bui-checkbox:after{
            position: absolute;
            content: "";
            width:8px;
            height: 4px;
            border-left:2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg) translate(-50%,-50%);
            left:50%;
        }
        label.bui-checkbox-label input[type="checkbox"]:checked + .bui-checkbox {
            background-color: #00a8fe;
            border: 0px;
            width: 14px;
            height: 14px;
        }
    </style>
</head>
<body>
    
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex"><i class="bui-checkbox"></i>男
    </label>
    <label class="bui-checkbox-label">
        <input type="checkbox" name="sex"><i class="bui-checkbox"></i>女
    </label>
   
</body>
</html>

运行结果：
在这里插入图片描述

switch开关自定义css3制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>switch开关自定义css3制作</title>
		<style>
			.switch-component {
			  position: relative;
			  width: 60px;
			  height: 30px;
			  background-color: #dadada;
			  border-radius: 30px;
			  border: none;
			  outline: none;
			  -webkit-appearance: none;
			  transition: all .2s ease;
			}
			.switch-component::after {
			  content: '';
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 50%;
			  height: 100%;
			  background-color: #fff;
			  border-radius: 50%;
			  transition: all .2s ease;
			 }
			 
			/*checked状态时，背景颜色改变*/
			.switch-component:checked {
			  background-color: #00E266;
			}
			 
			/*checked状态时，按钮位置改变*/
			.switch-component:checked::after {
			  left: 50%;
			 }
		</style>
	</head>
	<body>
		<input class='switch-component' type='checkbox'>
	</body>
</html>

运行结果：
在这里插入图片描述

lvxinaidou

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
自定义的复选框checkbox

fontawesome自定义的复选框checkbox<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>checkbox</title> <script src="https://cdn.bootcss.com/jquery/3.3....
复制链接

扫一扫