input[type=checkbox]{ width: 16px; height: 16px; margin-top: 2px; position: relative;}input[type=checkbox]::after { position: absolute; top: 0; color: #000; width: 16px; height: 16px; display: inline-block; vi.
在Web开发中，有时候需要显示一些
复选框
（
checkbox
），表明这个地方是可以进行勾选操作的，但是有时候是只想告知用户”这个地方是可以进行勾选操作的”而不想让用户在此处勾选（比如在信息展示页面），这时候就需要将
复选框
设置成只读的效果。
提到只读，很容易想到使用readonly属性，但是对于
复选框
来说，这个属性和期望得到的效果是有差别的。原因在于readonly属性关联的是页面元素的value属性（例如textbox，设置了readonly就不能
修改
输入框的文本内容），而
复选框
的勾选/取消并不改变其value属性，改变的只是一个checked状态。所以对于
checkbox
来说，设置了reado
.wx-
checkbox
-
input
.wx-
checkbox
-
input
-checked{
background: #0d59c3;
border:1px solid #0d59c3;
color:#ffffff;
使用表单验证时，
CheckBox
是不可缺少的一部分。
由于浏览器兼容性，
checkbox
会显示不同的样式，直接设置
input
的 backgroundColor 属性，不能改变
checkbox
的
背景颜色
和样式。
下面是 Safari 浏览器 PC 端样式
下面是 Chrome 移动端样式
如果是用第三方库（例如 bootstrap），实际上是在原生的
input
上面进行改变，仍然不能...
大家都知道设置
CheckBox
的
选中
以及未
选中
效果可以使用selector，这种方式比较简单也比较传统这里不做讨论。我最近在做项目的时候使用的是Appcompat
checkbox
，这个控件是一个兼容控件,在support－V7包中
android.support.v7.widget.AppCompat
CheckBox
，主要是可以实现Material风格的效果，即使在Android5.0以下的系统也
<!--名字自定义-->
<style name="
CheckBox
Theme">
<item name="colorAccent">@color/colorPrimary</item><!--
选中
颜色
-->
checkbox
" name="fruits" value="Apple">Apple
checkbox
" name="fruits" value="Banana">Banana
checkbox
" name="fruits" value="Orange">Orange
更改
颜色
：
checkbox
" name="fruits" value="
可以通过
修改
`checked` 属性来实现取消
选中
。
如果是原生的 HTML
input
复选框
，可以通过获取该元素，然后将其 `checked` 属性设置为 `false` 实现：
```js
var
checkbox
= document.getElementById("my
Checkbox
");
checkbox
.checked = false;
如果是使用框架或库创建的
复选框
，则需要根据具体的实现方式来进行操作。
