js+css实现多选连线单个多对一代码

代码语言:html

所属分类:布局界面

代码描述:js+css实现多选连线单个多对一代码

代码标签: js css 多选 连线 单个 多对一 代码

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

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

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

  
<style>
@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo;

@layer demo {
  .linked-list {
    --checkbox-checked-border-color: dodgerblue;
    --radio-checked-border-color: dodgerblue;
    --join-stroke: 1px;
    --join-line: var(--join-stroke) dashed dodgerblue;
    --join-radius: 20px;
    --gap: 10vw;

    position: relative;
    display: grid;
    align-items: start; 
    grid-template-columns: 1fr  1fr;
    width: min(100%, 800px);
    gap: var(--gap);
  }
	
  .list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
    & > li{
      border: 1px solid var(--clr-lines);
      display: flex;
      align-items: center;  
      & > label{
        flex: 1;
        padding: ..........完整代码请登录后点击上方下载按钮下载查看

网友评论0