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

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

代码语言：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;
 .........完整代码请登录后点击上方下载按钮下载查看