使用CSS3实现input多选框自定义样式的方法示例

以下是关于“使用CSS3实现input多选框自定义样式的方法示例”的完整攻略：

1. 使用伪元素

我们可以使用CSS3的伪元素来自定义多选框的样式。具体步骤如下：

HTML

<input type="checkbox" id="check" name="check" />
<label for="check">多选框</label>

CSS

/* 隐藏原始多选框 */
input[type="checkbox"] {
  display: none;
}

/* 自定义多选框样式 */
label[for="check"] {
  position: relative;
  padding-left: 22px;
  cursor: pointer;
}

label[for="check"]::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  position: absolute;
  left: 0;
  top: 0;
}

/* 自定义多选框选中状态的样式 */
input[type="checkbox"]:checked + label::before {
  content: "\2713";
  color: #fff;
  background-color: #14a094;
  border-color: #14a094;
}

2. 利用背景图

我们可以利用CSS3的背景图功能来自定义多选框的样式。具体步骤如下：

HTML

<input type="checkbox" id="check" name="check" />
<label for="check">多选框</label>

CSS

/* 隐藏原始多选框 */
input[type="checkbox"] {
  display: none;
}

/* 自定义多选框样式 */
label[for="check"] {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(check.png) no-repeat;
  cursor: pointer;
  vertical-align: middle;
}

/* 自定义多选框选中状态的样式 */
input[type="checkbox"]:checked + label {
  background-position: -18px 0;
}

注意：这种方法需要提前准备好背景图片。

以上就是使用CSS3实现input多选框自定义样式的方法示例的完整攻略。希望对你有所帮助！