HTMLElement实现分组开关效果代码-html代码-BFW代码库

HTMLElement实现分组开关效果代码

代码语言：html

所属分类：其他

代码描述：HTMLElement实现分组开关效果代码，类别组有个总开关，下面有子选项开关，可全选，单独选择。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
toggle-categories {
	display: block;
	
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		
		&:not(ul ul) {
			background-color: #88888830;
			/* width: fit-content; */
			margin-inline: auto;
			padding-block-end: .25rem;
		}
		
		li:not(li li) {
			margin-block-end: .5rem;
		}
		
		ul {
			margin-block: .5rem;
		}
	}
	
	label { cursor: pointer; }
	
	/* category headings */
	li:not(li li) > .toggle-input {
		background-color: #88888840;
		justify-content: space-between;
		font-weight: bold;
		
		label:not(.toggle) {
			padding-block: .25rem;
		}
		.toggle { 
			--_height: .8rem;
			--_color: light-dark(red, hotpink);
		}
		
		&:hover .toggle {
			@media (pointer: fine) {
				/* --_slider-bg: oklch(from var(--_color) 60% 60% h); */
				/* --_slider-active-bg: oklch(from var(--_color) 60% 40% h); */
				--_slider-bg: var(--_color);
				--_slider-active-bg: var(--_color);
			}
		}
		
	}
	
	.toggle-input { 
		padding: .25rem .75rem;
		display: .........完整代码请登录后点击上方下载按钮下载查看