这个得用Html做的
哈巴河网站建设公司成都创新互联,哈巴河网站设计制作，有大型网站制作公司丰富经验。已为哈巴河上千提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的哈巴河做网站的公司定做！
form action="" method="get"
您喜欢的水果？br /
labelinput name="Fruit" type="checkbox" value="0" /苹果 /label
labelinput name="Fruit" type="checkbox" value="1" /桃子 /label
labelinput name="Fruit" type="checkbox" value="2" /香蕉 /label
labelinput name="Fruit" type="checkbox" value="3" /梨 /label
/form
在淘宝页面装修中添加自定义模块，选择这个模块上边的编辑两个字，然后在源代码上打勾，就可以添加html+css代码了。
您可以在网上找代码，然后再修改css即可。
不过，不建议你添加过多的自定义模块。自定义模块里添加的商品需要手动添加商品地址，商品名称，图片链接的地址。这样比较麻烦。自带的模块就不用这样。
您要是店铺开的大的话，建议您还是买一个，这样漂亮，还不用那么麻烦。
给你个插件吧：
原理就是自己做两个checkbox的样式，一个为空一个为选中状态。将原来的默认的checkbox隐藏掉，通过label去控制隐藏掉的checkbox状态。最后通过js判断该隐藏的checkbox状态，从而改变你自定义的checkbox样式。
希望可以帮到你。
1、首先，需要添加一段CSS隐藏所有的Checkbox复选框。要做到点需要添加一段代码到你的CSS文件中。代码如下：
/*** 隐藏默认的checkbox***/
input[type=checkbox] {
visibility: hidden;
}
2、开始创建复选框区的HTML。代码如下：
section
!-- Checbox One --
h3Checkbox One/h3
div class="checkboxOne"
input type="checkbox" value="1" id="checkboxOneInput" name="" /
label for="checkboxOneInput"/label
/div
/section
3、用一个DIV元素包含checkbox，使用它们来做黑色条带和圆角。代码如下：
/*** Create the slider bar***/
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 3px;
}
4、当选中复选框后的判定代码。代码如下
/*** Move the slider in the correct position if the checkbox is clicked**/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px;
}
复选框选中前。
复选框选中后。
头像图片，然后再来个checkbox
把checkbox相对定位，移到图片上合适的地方
就哦了~~~
一般情况下淘宝是不允许使用自定义样式的，个别装修位置是可以通过style type="text/css"/style内嵌的方式写入css的。不过css要写在一行之内，不要回车换行。
