橘猫敲代码 2023-03-15 15:34 采纳率: 65.2%
浏览 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日

悬赏问题

  • ¥15 泥浆密度沿着管路的长度方向在不断变化,如何来表示泥浆密度随管路的变化
  • ¥15 关于#人工智能#的问题:(2)设计一个GUI,允许语音和文本实现谣言的检测
  • ¥50 请教 麒麟系统挂载怎么安装
  • ¥15 如何在ns3中实现路径的自由切换
  • ¥20 SpringBoot+Vue3
  • ¥15 IT从业者的调查问卷
  • ¥65 LineageOs-21.0系统编译问题
  • ¥30 关于#c++#的问题,请各位专家解答!
  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做