您的位置:首页 > css拷用 > 表单集 > 正文

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

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

美化效果
单选框美化后效果

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

一、单选框效果

单选框效果-可点击试试

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

二、代码

1、引入css库和js库代码
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

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

2、对应html代码

<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)即可完成使用应用。

项目 操作 备注
框架 layui

立即下载layui v2X(实时更新

引入CSS 需要 <link rel="stylesheet" href="layui/css/layui.css" media="all">
引入JS 需要 此网页布局html引入JS库和自定义Js代码
layui教程 layui使用教程 layui教程地址

四、独立演示地址与免费下载地址

1、演示地址:

查看案例

2、下载地址:

此美化后单选框布局是现在流行主流效果,简单大方,不失单选框本色又通过css库美化兼容各大浏览器。以上thinkcss拷用栏目整理表单资源

相关标签: 按钮 美化 单选按钮 单选框
文章来源网址:www.thinkcss.com/kaoyong/1454.shtml

日期:2017-10-13 11:17 ThinkCSS整理 layui