css+checkbox实现电影院买票选座多选效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+checkbox实现电影院买票选座多选效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
  
<style>
body {
  --ButtonBorder: color-mix(in oklab, Canvas 80%, CanvasText 20%);
  --ColorError: color-mix(in oklab, hsl(360, 60%, 46%), Canvas 10%);
	--ColorSuccess: color-mix(in oklab, hsl(136, 41%, 41%), Canvas 10%);
	--GrayCanvas: color-mix(in oklab, Canvas 95%, CanvasText 10%);

  background-color: Canvas;
  color: CanvasText;
  /*color-scheme: light dark;*/
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  font-weight: normal;
}

legend { font-weight: 500; }

:where([type=checkbox]) {
  --_icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M14 2.5l-8.5 8.5-3.5-3.5-1.5 1.5 5 5 10-10z"/></svg>');
	appearance: none;
	height: 2em;
	margin: 0;
	width: 2em;
	&:checked { background: var(--AccentColor) var(--_icon) no-repeat 50% / 55%; }
}

:where(.ui-cinema) {
  all: unset;
  direction: ltr;
  & input {
    --_bdc: color-mix(in srgb, var(--ui-cinema-seat-bg, var(--GrayCanvas)), #000 30%);
    aspect-ratio: 1 / .9;
    background-color: var(--ui-cinema-seat-bg, var(--GrayCanvas));
    border-color: var(--_bdc);
    border-radius: .5em .5em .15em .15em;
    border-style: solid;
    border-width: 0 0 .25em 0;

    &:checked { 
      --ui-cinema-seat-bg: var(--ColorSuccess);
      --AccentColor: var(--ui-cinema-seat-bg);
      border-color: var(--_bdc);
    }
    &:disabled { --ui-cinema-seat-bg: var(--ColorError); }
    &:is([value=""], :not([value])) {
      opacity: 0;
      pointer-events: none;
    }
    &:focus-visible:not(:checked),
    &:hover:not(:checked):not(:disabled) {
      background: color-mix(in srgb, var(--ColorSuccess), Canvas 80%);
    }
    &:focus-visible:checked {
      outline: 2px solid color-mix(in srgb, var(--ColorSuccess), Canvas 40%);
    }
    &[inert] { --ui-cinema-seat-bg: var(--ButtonBorder); }
  }
  & label { display: contents; }
  & li {
    align-items: center;
    counter-increment: row;
    display: grid;
    gap: 1ch;
    grid-auto-flow: column;
    &::before,
    &::after {
      content: counter(row);
      font-size: small;
      padding-inline: 1ch;
    }
  }
  & ol {
    counter-reset: row;
    display: grid;
    gap: 1ch;
    padding: 0;
  }
}

:where(.ui-color-key) {
	all: unset;
	background-color: var(--GrayCanvas);
	border-radius: var(--ui-color-key-bdrs, 5ch);
  color: CanvasText;
	display: grid;
	gap: 2ch;
	grid-auto-flow: column;
	padding: 1ch 2ch;
	width: fit-content;
	& li {
		display: grid;
		font-size: smaller;
		gap: 1ch;
		grid-auto-flow: column;
		align-items: center;
		&::before {
			aspect-ratio: 1 / 1;
			background-color: var(--ui-color-key, var(--ButtonBorder));
			border: 1px solid color-mix(in srgb, var(--ui-color-key), #000 15%);
			border-radius: 50%;
			content: "";
			display: block;
			width: 1em;
		}
	}
}
</style>

  
  
</head>

<body>
    <div  style="margin:0 auto;width:600px;">
  <fieldset class="ui-cinema">
  <legend>Chose your seats</legend>
  <ol>
    <li>
      <label><input type="checkbox"></label>
      <label aria-label="1-8"><input type="checkbox" value="1-8"></label>
      <label aria-label="1-6"><input type="checkbox" value="1-6"></label>
      <label aria-label="unavailable"><input type="checkbox" value="1-4" disabled></label>
      <label aria-label="unavailable"><input type="checkbox" value="1-2" disabled></label>
      <label aria-label="1-1"><input type="checkbox" value="1-1"></label>
      <label aria-label="1-3"><input type="checkbox" value="1-3"></label>
      <label aria-label="1-5"><input type="checkbox" value="1-5"></label>
      <label aria-label="1-7"><input type="checkbox" value="1-7"></label>
      <label aria-label="unavailable"><input type="checkbox"></label>
    </li>
    <li>
      <label aria-label="2-10"><input type="checkbox" value="2-10"></label>
      <label aria-label="2-8"><input type="checkbox" value="2-8"></label>
      <label aria-label="2-6"><input type="checkbox" value="2-6"></label>
      <label aria-label="2-4"><input type="checkbox" value="2-4"></label>
      <label aria-label="2-2"><input type="checkbox" value="2-2"></label>
      <label aria-label="2-1"><input type="checkbox" value="2-1"></label>
      <label aria-label="2-3"><input type="checkbox" value="2-3"></label>
      <label aria-label="2-5"><input type="checkbox" value="2-5"></label>
      <label aria-label="2-7"><input type="checkbox" value="2-7"></label>
      <label aria-label="2-9"><input type="checkbox" value="2-9"></label>
    </li>
    <li>
      <label aria-label="3-10"><input type="checkbox" value="3-10"></label>
      <label aria-label="3-8"><input type="checkbox" value="3-8"></label>
      <label aria-label="3-6"><input type="checkbox" value="3-6"></label>
      <label aria-label="3-4"><input type="checkbox" value="3-4"></label>
      <label aria-label="3-2"><input type="checkbox" value="3-2"></label>
      <label aria-label="3-1"><input type="checkbox" value="3-1"></label>
      <label aria-label="3-3"><input type="checkbox" value="3-3"></label>
      <label aria-label="3-5"><input type="checkbox" value="3-5"></label>
      <label aria-label="3-7"><input type="checkbox" value="3-7"></label>
      <label aria-label="3-9"><input type="checkbox" value="3-9"></label>
    </li>
    <li>
      <label aria-label="4-10"><input type="checkbox" value="4-10"></label>
      <label aria-label="4-8"><input type="checkbox" value="4-8"></label>
      <label aria-label="4-6"><input type="checkbox" value="4-6"></label>
      <label aria-label="4-4"><input type="checkb.........完整代码请登录后点击上方下载按钮下载查看