深入浅出：checkbox样式详解

一、checkbox样式表

在HTML中，checkbox（复选框）是一种经常被使用的表单元素。随着用户体验对于网站的重要性不断提升，优美的checkbox样式也成为了现代网站重要的设计元素之一。采用CSS样式表对checkbox进行美化，是一种常见的做法。

HTML代码：

<label for="checkbox-id">
  <input type="checkbox" id="checkbox-id">
  <span>选项1</span>
</label>

CSS代码：

input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}
input[type="checkbox"] + span {
  position: relative;
  padding-left: 25px;
}
input[type="checkbox"] + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  background-color: #fff;
}
input[type="checkbox"]:checked + span::before {
  content: "\2713";
  font-size: 14px;
  text-align: center;
  line-height: 18px;
  color: #007aff;
}

以上代码实现了checkbox默认样式和选中样式的美化。通过设置checkbox的opacity、width和height为0，让其隐藏。使用元素包裹checkbox和文本，可以使得文本点击时选中checkbox。

二、layui checkbox样式

Layui是一个轻量级的前端框架，提供了便捷的UI组件和JS模块，使得前端开发效率更高，同时具有一定的美观性。Layui的checkbox组件为我们提供美观的checkbox样式，并且可以自定义checkbox的形状、大小等。

HTML代码：

<div class="layui-form-item">
  <div class="layui-input-block">
    <input type="checkbox" name="like[write]" lay-skin="primary" title="写作" checked>
    <input type="checkbox" name="like[read]" lay-skin="primary" title="阅读">
    <input type="checkbox" name="like[play]" lay-skin="primary" title="游戏">
  </div>
</div>

以上代码展示了Layui使用checkbox组件的方法。通过设置lay-skin属性，可以实现不同皮肤和风格的checkbox样式。可以在初始化时设置checkbox的选中状态（checked）。此外，Layui的checkbox组件还提供了许多自定义方法和事件，如lay-filter、lay-text等。

三、checkbox样式图片

除了使用CSS样式和UI库提供的皮肤外，我们还可以使用图片来实现checkbox的美化。将checkbox替换为图片，需要使用元素的for属性，将checkbox和图片关联起来。

HTML代码：

<label for="checkbox-id">
  <input type="checkbox" id="checkbox-id" style="display:none">
  <img src="checkbox_unchecked.png" id="unchecked">
  <img src="checkbox_checked.png" id="checked">
</label>

CSS代码：

#checkbox-id:checked + #checked {
  display: block;
}
#checkbox-id:not(:checked) + #unchecked {
  display: block;
}
#checked, #unchecked {
  display: none;
  width: 18px;
  height: 18px;
}

以上代码使用for属性使得图片和checkbox关联，使用CSS代码设置图片的显示和隐藏。checkbox选中时，显示选中状态的图片；未选中时，显示未选中状态的图片。

四、checkbox样式美化

为了让checkbox更符合页面设计风格，我们可以对其进行美化，使得其颜色、边框和形状更加一致。以下代码将checkbox变成了红色圆形：

CSS代码：

input[type=checkbox] {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  outline: none;
}
input[type=checkbox]:checked {
  background-color: #ff0000;
  border-color: #ff0000;
}

以上代码使用了CSS3的border-radius属性将checkbox变成了圆形。通过设置background-color和border-color实现状态的改变。通过设置outline: none，消除焦点的边框。

五、checkbox样式修改

checkbox样式的修改并不局限于单一的颜色或形状的改变，我们还可以针对不同状态的checkbox进行不同的样式设置。以下代码展示了checkbox在不同状态下的样式修改：

HTML代码：

<input type="checkbox" id="checkbox-id"/>
<label for="checkbox-id">点击我</label>

CSS代码：

/* 默认状态 */
#checkbox-id {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
}

/* 鼠标移入状态 */
label:hover #checkbox-id:not(:checked) {
  border-color: #007aff;
}

/* 选中状态 */
#checkbox-id:checked {
  background-color: #007aff;
  border-color: #007aff;
}

/* 选中状态下的描边 */
#checkbox-id:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
  margin-top: 2px;
  margin-left: 6px;
}

以上代码将checkbox默认状态下的border-radius设置为3px，显示为正方形。鼠标移入状态下的border-color和hover伪类组合使用，当鼠标移入label元素时，checkbox的边框颜色发生变化。选中状态下的background-color和border-color为蓝色。选中状态下，为checkbox添加白色的箭头描边。

六、checkbox选中样式

除了对checkbox本身进行样式美化外，我们还可以通过修改选中状态下的样式，来改变用户的视觉反馈。以下代码实现了checkbox选中状态下的背景色和样式变化：

CSS代码：

label {
  display: inline-block;
  position: relative;
  padding-left: 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5em;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + i.fa {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ccc;
}
input[type="checkbox"]:checked + i.fa {
  background-color: #007aff;
  color: #fff;
  border-color: #007aff;
}

以上代码中使用:before伪类添加FontAwesome图标，并设置其样式。当checkbox被选中时，checkbox后面的FontAwesome图标的背景色和文字颜色发生变化，来提示用户当前checkbox已选中。

七、checkbox样式变成圆形

将checkbox变成圆形是一种常见的美化方式。以下代码展示了如何将checkbox变成圆形：

CSS代码：

/* 设置checkbox样式 */
input[type="checkbox"] {
  position: absolute;
  display: block;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #9b9b9b;
  border-radius: 50%;
}

/* 设置选中状态下的样式 */
input[type="checkbox"]:checked {
  border: 1px solid #007aff;
  background-color: #007aff;
  color: #fff;
}

/* 设置伪类，添加选中的勾 */
input[type="checkbox"]:checked:before {
  content: "\2713";
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 20px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #007aff;
}

以上代码使用position属性将checkbox定位到其父元素的最上方，使用border-radius属性实现圆形效果。使用:checked伪类来设置checkbox选中状态下的样式，使用:before伪类来添加选中状态下的勾。

八、android checkbox样式

在Android应用程序中，checkbox也是一种经常出现的元素。Android系统为我们提供了标准的checkbox样式，但是这样的样式可能无法满足我们的视觉需求。以下代码演示了如何修改Android checkbox样式：

XML代码：

<CheckBox
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:button="@null"
  android:background="@drawable/custom_checkbox"/>

以上代码使用android:button属性将checkbox原生图标去掉，并使用android:background属性将自定义的样式添加到checkbox上。

Drawable代码（custom_checkbox.xml）：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true">
    <shape android:shape="rectangle">
      <stroke android:width="2dp" android:color="@color/checkBoxStrokeChecked"/>
      <solid android:color="@color/checkBoxBackgroundChecked"/>
    </shape>
  </item>
  <item android:state_checked="false">
    <shape android:shape="rectangle">
      <stroke android:width="2dp" android:color="@color/checkBoxStroke"/>
      <solid android:color="@color/checkBoxBackground"/>
    </shape>
  </item>
</selector>

以上代码为CheckBox状态中不同项的对应值和颜色的定义，根据不同的状态对应不同的颜色。

九、自定义checkbox样式

通过使用CSS和图片等等，我们可以自定义checkbox的样式。以下代码演示了如何使用Bootstrap自定义checkbox：

HTML代码：

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckbox2">
  <label class="custom-control-label" for="customCheckbox2">Check this custom checkbox</label>
</div>

CSS代码：

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}
.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}
.custom-control-input:checked~.custom-control-label::after {
  background-color: #007bff;
}

以上代码使用Bootstrap的CSS