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