input复选框的美化

最新推荐文章于 2024-04-01 19:33:10 发布

结城

最新推荐文章于 2024-04-01 19:33:10 发布

阅读量650

点赞数

分类专栏：组件美化文章标签： input单选框组件的美化

本文链接：https://blog.csdn.net/qq_43487181/article/details/88755958

版权

组件美化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.checkbox-group{
				margin-bottom: 30px;
			}
			.checkbox{
				cursor: pointer;
				user-select: none;
			}
			.checkbox input{
				display: none;
			}
			.checkbox span{
				display: inline-block;
				width: 20px;
				height: 20px;
				line-height: 20px;
				border: 1px solid #ccc;
				border-radius: 3px;
				cursor: pointer;
				vertical-align: middle;
				text-align: center;
			}
			.checkbox span:after{
				display: block;
				content: "";
			}
			.checkbox.checked{
				color: rgb(0, 174, 255);
			}
			.checkbox.checked span{
				border-color: rgb(0, 174, 255);
				color: white;
				
			}
			.checkbox.checked span:after{
				content: "√";
				background-color: rgb(0, 174, 255); 
			}
			.checkbox.disabled{
				opacity: .5;
				cursor: not-allowed;
			}
        </style>
	</head>
	<body>
		<label>
			<input type="checkbox">篮球
		</label>
		<script>
			var checkboxs = document.querySelectorAll("[type='checkbox']");
			for(var i=0;i<checkboxs.length;i++){
				var checkbox = checkboxs[i];
				checkbox.onclick = function(e){
					e.stopPropagation();//阻止冒泡到原来的input上
				}
				var label = checkbox.parentNode;
				var span = document.createElement('span');
				label.insertBefore(span,checkbox);
				label.className = 'checkbox';
				label.onclick = function(){
					var labelName = this.className;
					if(labelName.indexOf('disable')>-1){
						return;
					}
					if(labelName.indexOf('checked')>-1){
						this.className = 'checkbox';
					}else{
						this.className = 'checkbox checked';
					}
				}
			}
		</script>
	</body>
</html>

结城

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
input复选框的美化

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .checkbox-group{ margin-bottom: 30px; } .checkbox{ cursor...
复制链接

扫一扫