无需图片，用CSS设置checkbox的样式方法分享

2024-01-11 07:12:48

厌倦了千篇一律的checkbox样式？想让你的网页更具个性化？那么，你可以使用纯CSS来自定义checkbox样式。

步骤1：隐藏原有checkbox

首先，你需要隐藏掉原有的checkbox复选框。你可以使用以下CSS代码：

input[type=checkbox] {
  display: none;
}

步骤2：添加label元素

隐藏掉Checkbox复选框后，你需要添加一个label HTML元素，并设置for属性指向对象checkbox元素。html结构如下：

<input type="checkbox" id="checkbox1">
<label for="checkbox1">复选框</label>

步骤3：设置label元素样式

接下来，你需要设置label元素的样式。你可以使用以下CSS代码：

label {
  cursor: pointer;
}

label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-right: 5px;
}

label:after {
  content: "";
  display: none;
  width: 6px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

input[type=checkbox]:checked + label:after {
  display: block;
}

示例

以下是一个完整的示例，展示了如何使用纯CSS自定义checkbox样式：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    input[type=checkbox] {
      display: none;
    }

    label {
      cursor: pointer;
    }

    label:before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 1px solid #ccc;
      border-radius: 2px;
      margin-right: 5px;
    }

    label:after {
      content: "";
      display: none;
      width: 6px;
      height: 9px;
      border: solid white;
      border-width: 0 2px 2px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    input[type=checkbox]:checked + label:after {
      display: block;
    }
  </style>
</head>
<body>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">复选框</label>
</body>
</html>