css的has属性实现radio单选切换效果代码-html代码-BFW代码库

css的has属性实现radio单选切换效果代码

代码语言：html

代码描述：css的has属性实现radio单选切换效果代码

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

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

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


  
  
<style>
*,
*:after,
*:before {
	box-sizing: border-box;
}

:root {
	--radius: 8px;
	--border: 4px;
	--height: 48px;
  --speed: 0.25s;
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	align-content: center;
	gap: 2rem;
	background: hsl(0 0% 90%);
	font-family:  "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
}

.tabs {
	height: var(--height);
	display: grid;
	grid-auto-flow: column;
	background: hsl(0 0% 0%);
	border-radius: var(--radius);
	grid-auto-columns: 1fr;
	position: relative;
	border: var(--border) solid hsl(0 0% 0%);
}

.tabs {
	--ease: linear(
    0, 0.1641 3.52%, 0.311 7.18%,
    0.4413 10.99%, 0.5553 14.96%,
    0.6539 19.12%, 0.738 23.5%,
    0.8086 28.15%, 0.8662 33.12%,
    0.9078 37.92%, 0.9405 43.12%,
    0.965 48.84%, 0.9821 55.28%,
    0.992 61.97%, 0.9976 70.09%, 1
  );
}

.tabs > input,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.tabs:has(:checked:nth-of-type(1)) { --active: 0; }
.tabs:has(:checked:nth-of-type(2)) { --active: 1; }
.tabs:has(:checked:nth-of-type(3)) { --active: 2; }
.tabs:has(:checked:nth-of-type(4)) { --active: 3; }

.tabs :checked + label { --highlight: 1; }

.tabs:has(input:nth-of-type(2)) { --count: 2; }
.tabs:has(input:nth-of-type(3)) { --count: 3; }
.tabs:has(input:nth-of-type(4)) { --count: 4; }

.tabs label {
	padding: 0 clamp(0.5rem, 2vw + 0.25rem, 2rem);
	cursor: pointer;
	text-align: center;
	height: 100%;
	display: grid;
	border-radius: calc(var(--radius) - var(--border));
	place-items: cen.........完整代码请登录后点击上方下载按钮下载查看