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

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

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