CSS3中的content字符编码，content小的icon地址

最新推荐文章于 2025-11-26 03:52:16 发布

转载最新推荐文章于 2025-11-26 03:52:16 发布 · 1.5k 阅读

HTML 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用CSS实现的自定义复选框样式的方法，包括如何改变未选中和选中状态的外观，并通过伪元素展示选中状态。

.myCheck + label{
  display: inline-block;
  background-color: white;
  border-radius: 2px;
  border:1px solid #d3d3d3;
  width:20px;
  height:20px;
  line-height: 20px;
  margin-right: 10px;
  text-align: center;
  vertical-align: bottom;
}
.myCheck:checked + label{
  background-color: #eee;
}
.myCheck:checked + label:after{
  content:"\2714";
}

<label>
  <input type="checkbox" value="1" class="myCheck">
  <label></label>测试
</label>