多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
![](https://img.kancloud.cn/3a/67/3a67bf3271dfe319dd464568f9580c50_747x273.png) ``` <form class="real-form real-form-pane" action=""> <div class="real-form-item"> <label class="real-form-label">按钮样式</label> <div class="real-input-block"> <div class="real-RadioStyle"> <input type="checkbox" id="love1"> <label for="love1">女</label> <input type="checkbox" id="love2"> <label for="love2">绘画</label> <input type="checkbox" id="love3"> <label for="love3">摄影</label> <input type="checkbox" id="love4" checked=""> <label for="love4">骑行</label> </div> </div> </div> <div class="real-form-item"> <label class="real-form-label">普通样式</label> <div class="real-input-block"> <span class="real-checkbox"><label><input type="checkbox" checked="checked"><em></em></label></span> <span class="real-checkbox real-blue"><label><input type="checkbox" checked="checked"><em></em></label></span> <span class="real-checkbox real-red"><label><input type="checkbox" checked="checked"><em></em></label></span> <span class="real-checkbox real-yellow"> <label> <input type="checkbox" checked="checked"><em></em> </label> </span> <span class="real-checkbox real-green"><label><input type="checkbox" checked="checked"><em></em></label></span> <span class="real-checkbox real-black"><label><input type="checkbox" checked="checked"><em></em></label></span> </div> </div> <div class="real-form-item"> <label class="real-form-label">有文字描述</label> <div class="real-input-block"> <span class="real-checkbox"><label><input type="checkbox" checked="checked"><em></em><span>默认</span> </label> </span> <span class="real-checkbox real-blue"><label><input type="checkbox" checked="checked"><em></em><span>蓝色</span> </label> </span> <span class="real-checkbox real-red"><label><input type="checkbox" checked="checked"><em></em><span>红色</span></label></span> <span class="real-checkbox real-yellow"><label><input type="checkbox" checked="checked"><em></em><span>黄石</span> </label> </span> <span class="real-checkbox real-green"><label><input type="checkbox" checked="checked"><em></em><span>绿色</span> </label> </span> <span class="real-checkbox real-black"><label><input type="checkbox" checked="checked"><em></em><span>黑色</span> </label> </span> </div> </div> <div class="real-form-item"> <label class="real-form-label">选中后文字也一起变色</label> <div class="real-input-block"> <span class="real-checkbox"><label><input type="checkbox" checked="checked"><em></em><span>默认</span> </label></span> <span class="real-checkbox real-blue2"><label><input type="checkbox" checked="checked"><em></em><span>蓝色</span> </label> </span> <span class="real-checkbox real-red2"><label><input type="checkbox" checked="checked"><em></em><span>红色</span> </label></span> <span class="real-checkbox real-yellow2"><label><input type="checkbox" checked="checked"><em></em><span>黄石</span> </label> </span> <span class="real-checkbox real-green2"><label><input type="checkbox" checked="checked"><em></em><span>绿色</span> </label> </span> <span class="real-checkbox real-black2"><label><input type="checkbox" checked="checked"><em></em><span>黑色</span> </label> </span> </div> </div> </form> ```