橘猫敲代码 2023-03-15 15:34 采纳率: 65.7%
浏览 19
已结题

table默认选中样式

table多选框勾选,最上边这个默认选中的样式是这种

img


想换成下边这种,怎么调一下

img

  • 写回答

2条回答 默认 最新

  • dalaocubenren 2023-03-15 15:59
    关注

    要将多选框样式更改为空心方块,您可以使用CSS样式表来控制多选框的外观。具体来说,您可以使用CSS伪元素 ::before 或 ::after 来添加一个空心方块,并对其应用样式规则。

    以下是一个示例代码,演示如何将多选框的样式更改为空心方块:

    /* 选择所有表格中的多选框 */
    table input[type="checkbox"] {
      /* 使用伪元素 ::before 添加空心方块 */
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 5px;
      /* 更改空心方块的样式 */
      border: 2px solid blue;
      border-radius: 3px;
    }
    
    /* 选择已经勾选的多选框 */
    table input[type="checkbox"]:checked::before {
      /* 更改已经勾选的多选框的样式 */
      content: "";
      background-color: blue;
      border: none;
    }
    
    
    

    通过以上的CSS样式代码,您可以将表格中的多选框的样式更改为空心方块,并使用黑色边框来显示多选框的边框。当多选框被选中时,它将变成一个蓝色的实心方块。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月1日
  • 已采纳回答 3月24日
  • 创建了问题 3月15日

悬赏问题

  • ¥200 基于同花顺supermind的量化策略脚本编辑
  • ¥20 Html备忘录页面制作
  • ¥15 黄永刚的晶体塑性子程序中输入的材料参数里的晶体取向参数是什么形式的?
  • ¥20 数学建模来解决我这个问题
  • ¥15 计算机网络ip分片偏移量计算头部是-20还是-40呀
  • ¥15 stc15f2k60s2单片机关于流水灯,时钟,定时器,矩阵键盘等方面的综合问题
  • ¥15 YOLOv8已有一个初步的检测模型,想利用这个模型对新的图片进行自动标注,生成labellmg可以识别的数据,再手动修改。如何操作?
  • ¥30 NIRfast软件使用指导
  • ¥20 matlab仿真问题,求功率谱密度
  • ¥15 求micropython modbus-RTU 从机的代码或库?