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: flex;
		align-items: center;

		label {
			&:hover { cursor: pointer; }
			&:not(.toggle) { width: calc(100% - 2rem); }
			&.toggle + label { padding-inline: .5rem 0; }
			&:has(+ .toggle) { padding-inline: 0 .5rem; }
		}
		
		&:has(input:focus-visible) label:not(.toggle) { 
			outline: solid 2px var(--_color, #6666bbef);
			outline-offset: -1px; 
		}

		.toggle {
			--_color: #018259;
			/* --_color: light-dark(#018259, #014f4b); */
			--_color-active: light-dark(var(--_color), oklch(from var(--_color) 48% c h));
			--_transition: transform 0.2s ease-in-out, background-color 0.2s linear;
			--_height: 1rem;
			--_padding: calc(var(--_height) / 9); /* eg: 2px */
			--_width: calc(1.5 * (var(--_height) + var(--_padding))); /* 30px */
			--_circle: calc(var(--_height) - (2 * var(--_padding))); /* .........完整代码请登录后点击上方下载按钮下载查看