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