1、首先打开hbuilder软件，新建几个默认的复选框。
2、然后在上方的style标签设置input的样式，先设置input的display属性为none，将默认的单选框去掉，在设置一下各个单选框的margin的距离。
3、接着在下方继续设置样式，设置label标签的before和after伪元素，将原有before的单选框选中状态的属性“checked+label”设置变为红色实心框，同时未选中的状态的“label::after”为白色空心方框。
4、最后打开浏览器，即可看到设置好的样式，其中被选中的是红色的实心方框，没被选择的则是没有颜色的方框。
方法和详细的操作步骤如下：
1、第一步，打开软件并创建一些默认复选框，见下图，转到下面的步骤。
2、第二步，执行完上面的操作之后，在顶部样式标签上设置输入样式，将输入的显示属性设置为none，删除默认的单选框，然后设置每个单选框的边距，见下图，转到下面的步骤。
3、第三步，执行完上面的操作之后，继续设置下面的样式，设置“label”标签的伪元素before和after，然后将原始复选框更改为状态属性，“
checked + label”设置为红色的实心框，并取消选中状态，“ label :: after”为白色空心框，见下图，转到下面的步骤。
4、第四步，执行完上面的操作之后，打开浏览器，可以看到设置的样式，去掉了默认样式，见下图。这样，就解决了这个问题了。
默认应该是不选中的，但是一旦你点击之后就会选中状态无法恢复，如果你想执行点击可以选中和不选中之间切换，建议：1，你使用两个按钮第二个是取消，这两个可以来回切换2，不想设置两个可以在点击之后旁边现一个字体“取消”点击取消后用js控制去掉checked属性
3,放弃原来的单选按按钮自己做一个元素设置俩个背景颜色颜色一个实心一个空心表示两种状态点击时候背景颜色切换即可
