table默认选中样式

Question

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

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

Answer 1

要将多选框样式更改为空心方块，您可以使用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样式代码，您可以将表格中的多选框的样式更改为空心方块，并使用黑色边框来显示多选框的边框。当多选框被选中时，它将变成一个蓝色的实心方块。