当前位置: 首页 > article >正文

react->Antd->Table调整checkbox默认样式

checkbox默认不展示,hover此行时,出现checkbox,选中后不消失:

hover前,设置透明边框;

hover时,checkbox出现

选中后

代码块:

  .ant-checkbox {
    .ant-checkbox-inner {
      border: transparent;
    }
  }

  .ant-checkbox-checked .ant-checkbox-inner,
  .ant-checkbox-indeterminate .ant-checkbox-inner {
    border: 2px solid #3a89fe;
  }

  .ant-table-tbody
    > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
    > td
    .ant-checkbox-inner {
    border: 2px solid #3a89fe;
  }

表头checkbox

代码块

此处修改边框颜色

.ant-table-header {
    .ant-checkbox {
      .ant-checkbox-inner {
        border: 2px solid rgba(255, 255, 255, 0.10196);
      }
    }
  }

禁用的checkbox

代码块

此处修改背景色设为透明

  .ant-checkbox-disabled .ant-checkbox-inner {
    background-color: transparent;
  }


http://www.kler.cn/a/392110.html

相关文章:

  • Nuxt 版本 2 和 版本 3 的区别
  • 深入解析 OpenHarmony 构建系统-4-OHOSLoader类
  • 不对称信息
  • 24/11/12 算法笔记<强化学习> Policy Gradient策略梯度
  • 43.第二阶段x86游戏实战2-提取游戏里面的lua
  • Python酷库之旅-第三方库Pandas(208)
  • 贝式计算的 AI4S 观察:使用机器学习对世界进行感知与推演,最大魅力在于横向扩展的有效性
  • hive表名重命名、rename重命名
  • git config 保存密码
  • IT技术交流和分享平台(含报告)
  • golang分布式缓存项目 Day5 分布式节点
  • ssm093基于Java Web的毕业生就业状况管理系统设计与实现+jsp(论文+源码)_kaic
  • 谷歌浏览器支持的开发者工具详解
  • Linux符号使用记录
  • ubuntu20.04_从零LOD-3DGS的复现
  • 爬虫反爬机制和解决方案
  • 解决 ElSelect 数据量大导致加载速度慢
  • OpenGL【C++】台灯
  • 【AI换脸整合包及教程】深入了解Rope:一款强大的AI换脸工具及其技术原理
  • JavaScript 观察者设计模式
  • Scala的List(可变)
  • 微搭低代码入门02条件语句
  • 【SpringBoot】黑马大事件笔记-day3
  • 用 Python 从零开始创建神经网络(二):第一个神经元的进阶
  • 停车共享小程序ssm+论文源码调试讲解
  • 实现linux定时备份数据至群晖NAS