css实现table表格行聚焦编辑其他行模糊效果代码-html代码-BFW代码库

css实现table表格行聚焦编辑其他行模糊效果代码

代码语言：html

所属分类：表格

代码描述：css实现table表格行聚焦编辑其他行模糊效果代码

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

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

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

  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo;

@layer demo {
  :root {
    --accent: hsl(200 80% 50%);
    --border: color-mix(in oklch, canvas, canvasText 15%);
    --background: color-mix(in oklch, canvas, canvasText 2%);
    --head: light-dark(hsl(0 0% 98%), canvas);
    --selected: color-mix(in oklch, var(--accent), canvas 85%);
    --color: color-mix(in hsl, canvasText, #0000 50%);
    --hover-background: light-dark(hsl(0 0% 92%), hsl(0 0% 10%));
    --sibling-hover: red;
    --hover-color: green;
  }
  .members {
    background: light-dark(#fff, #000);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  table {
    font-size: 0.875rem;
    border-collapse: collapse;
    background: #0000;
    color: var(--color);
  }
  input {
    color: var(--color);
  }
  table:focus-within tbody tr:not(:focus-within) {
    filter: blur(4px) saturate(0.2);
    pointer.........完整代码请登录后点击上方下载按钮下载查看