open-props实现暗色亮色主题radio与checkbox单选多选效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现全屏粘性图片层叠下拉滚动效果代码

代码标签： open-props 暗色亮色主题 radio checkbox 单选多选

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  

<style>
@import "//repo.bfw.wiki/bfwrepo/css/open-props.css" layer(design.system);
@import "//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css" layer(demo.support);
@import "//repo.bfw.wiki/bfwrepo/css/open-props.theme.light.switch.css" layer(demo.theme);
@import "//repo.bfw.wiki/bfwrepo/css/open-props.theme.dark.switch.css" layer(demo.theme);

@layer demo {
  .taglist {
    padding: 0;
    border: none;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--size-2);
    max-inline-size: var(--size-content-2);
    
    > legend {
      height:0;
      width:0;
      overflow:clip;
    }
    
    > div {
      display: grid;
      align-items: center;
      grid-auto-flow: column;
      grid-template-columns: auto 1fr;
      
      > * {
        grid-area: 1/1;
      }
      
      > label {
        padding-inline: var(--size-3);
        padding-block: var(--size-1);
        background: white;
        border-radius: var(--radius-2);
        cursor: pointer;
      
        .dark & {
          background: var(--surface-2);
        }
      }
      
      > input {
        appearance: none;
        background: none;
        border: none;
        inline-size: 100%;
        block-size: 100%;
      
        &:checked ~ label {
          background-color: var(--link);
          color: var(--surface-1);
        }
      
        &:not(:checked):is(:focus-within, :hover) ~ label {
          color: var(--link);
        }
      }
    }
  }
}

@layer demo.support {
  body {
    display: grid;
    
    @media (width > 720px) {
      grid: 1fr / 1fr 1fr;
    }
    
    & > * {
      display: grid;
      place-content: center;
    }
  } 
  
  .dark, .light {
    color: var(--text-1);
    background: var(--surface-1);
    gap: var(--size-10);
    padding-inline: var(--size-3);
    padding-block: var(--size-10);
    
    > div {
      display: grid;
      gap: 1ch;
      
      > p {
        font-weight: var(--font-weight-6);
      }
    }
  }
  
  .light {
    background: var(--surface-3);
  }
}
</style>

  
</head>

<body translate="no">
  <div class="light">
  <div>
    <p>Flavor Profile: Checkboxes</p>
    <fieldset class="taglist">
      <legend>A list of items to select</legend>
      <div>
        <input type="checkbox" name="light-taglist" value="floral" id="light-taglist-checkbox-floral">
        <label for="light-taglist-checkbox-floral">Floral</label>
      </div>
      <div>
        <input type="checkbox" name="light-taglist" value="peachy" id="light-taglist-checkbox-peachy">
        <label for="light-taglist-checkbox-peachy">Peachy</label>
      </div>
      <div>
        <input type="checkbox" name="light-taglist" value="light" id="light-taglist-checkbox-light">
        <label for="light-taglist-checkbox-light">Light</label>
      </div>
      <div>
        <input type="checkbox" name="light-taglist" value="dry" id="light-taglist-checkbox-dry">
        <label for="light-taglist-checkbox-dry">Dry</label>
      </div>
      <div>
        <input type="checkbox" name="light-taglist" value="citrus" id="light-taglist-checkbox-citrus">
        <label for="light-taglist-checkbox-citrus">Citrus</label>
      </div>
      <div>
        <input type="checkbox" name="light-taglist" value="dark" id="light-taglist-checkbox-dark">
        <label for="light-taglist-checkbox-dark">Dark</label>
      </div>
      <div>
        <input type="checkbox" name="light-taglist" value="crisp" id="light-taglist-checkbox-crisp">
        <label for="light-taglist-checkbox-crisp">Crisp</label>
      </div>
      <div>
        <input type="checkbox" name="light-taglist" value="piney" id="light-taglist-checkbox-piney">
        <label for="light-taglist-checkbox-piney">Piney</label>
      </div>
    </fieldset>
  </div>
  
  <div>
    <p>Flavor Profile: Radios</p>
    <fieldset class="taglist">
      <legend>A list of items to select</legend>
      <div>
        <input type="radio" name="light-taglist-radio" value="floral" id="light-taglist-radio-floral">
        <label for="light-taglist-radio-floral">Floral</label>
      </div>
      <div>
        <input type="radio" name="light-taglist-radio" value="peachy" id="light-taglist-radio-peachy">
        <label for="light-taglist-radio-peachy">Peachy</label>
      </div>
      <div>
        <input type="radio" name="light-taglist-radio" value="light" id="light-taglist-radio-light">
        <label for="light-taglist-radio-light">Light</label>
      </div>
      <div>
        <input type="radio" name="light-taglist-radio" value="dry" id=".........完整代码请登录后点击上方下载按钮下载查看