html radio单选按钮美化代码资源 input radio单选框

html表单input之单选框radio美化代码资源。

单选框美化后效果

特点：引入框架后，input radio 单选框自动美化成这样布局效果，使用简单。

一、单选框效果

单选框按钮需要禁用不可选，但又存在，只需要input 加入disabled=" "即可。

二、代码

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

因为基于layui框架，所以你网页布局项目中需要拷贝文件入项目后，再html引入css库和js库文件即可。

<form class="layui-form" action="">
     <input type="radio" name="sex" value="男" title="男" /> 
         <input type="radio" name="sex" value="女" title="女" checked="" /> 
         <input type="radio" name="sex" value="禁" title="禁用" disabled="" />
 </form>
 <script>
 layui.use(['form'], function(){
 var form = layui.form
 });
 </script>

单选按钮属于表单，所以需要form同时设置class="layui-form",表单美化看似在input没有加什么样式或内容，但它是在js和css配合下完成，所以需要引入CSS库和JS库，同时表单需要自定义js代码。

三、成功应用使用

使用说明：此资源基于layui框架，所以需要下载此框架文件，引入项目后，html页面代码引入css文件和js文件，有自定义JS代码，再HTML放入提供JS自定义代码，最后只需要拷贝对应html代码即可实现需要效果。

项目使用步骤：
1、下载layui压缩包；
2、解压后，将文件夹内”layui“文件夹整体拷贝入当前项目；
3、html引入layui.css（注意路径正确）；
4、拷贝需要效果HTML代码（和JS）即可完成使用应用。