feat(checkbox&radio): 增强模板自定义能力 (#1686)

* feat(checkbox): 增强模板自定义能力

* feat(radio): 支持 lay-skin 属性; 增强模板自定义能力

* feat(form): 新增 lay-skin="none" 无样式风格

* docs: 添加 lay-skin="none" 文档

* docs: update

* fix: 单选禁用光标效果

* docs: lay-skin="none" 相关示例迁移至 form 页面

* docs: 新增 checkbox 自定义风格示例文件

* docs(form): 新增 radio 自定义风格示例文件

* docs(form): 新增 checkbox,radio 自定义风格示例的样式文件

* docs(form): 新增 checkbox 自定义风格示例

* docs(form): 新增 radio 自定义风格示例

* docs(form): 转移 checkbox,radio 自定义风格示例到对应的组件页面

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>

docs/form/checkbox.md

@@ -39,7 +39,7 @@ layui.use(function(){
 - 属性 `checked` 可设置默认选中
 - 属性 `disabled` 可设置禁用状态
 - 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）
-- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，默认风格可不填
+- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，`none`(无样式)<sup>2.9.8+</sup> 默认风格可不填
 
 特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。 
 
@@ -85,7 +85,7 @@ layui.use(function(){
 在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题
 
 
-<h2 id="title" lay-toc="{hot: true}">标题模板 <sup>2.8.3+</sup></h2>
+<h2 id="title" lay-toc="{}">自定义标题模板 <sup>2.8.3+</sup></h2>
 
 在 `checkbox` 元素后的相邻元素设置特定属性 `lay-checkbox`，可以与 `checkbox` 标题进行绑定。
 
@@ -119,6 +119,19 @@ layui.use(function(){
   </textarea>
 </pre>
 
+<h2 id="skin" lay-toc="{hot: true}">自定义任意风格 <sup>2.9.8+</sup></h2>
+
+通过对 `checkbox` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的多选组件。<br>
+**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。
+
+<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
+  obj.render();
+}}">
+  <textarea>
+{{- d.include("/form/examples/checkbox.skin.md") }}
+  </textarea>
+</pre>
+
 
 <h2 id="on" lay-toc="{hot: true}">复选框事件</h2>
 
@@ -175,4 +188,4 @@ layui.use(function(){
 });
 </script>
   </textarea>
-</pre>
+</pre>