单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的。本文收集了10个相对比较漂亮的美化版单选框和复选框,希望你会喜欢。

1、CSS3漂亮的自定义Checkbox复选框 9款迷人样式

之前我们分享过一款非常不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮,外观非常时尚。今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富,使用起来也比较方便。

在线演示        源码下载

2、CSS3自定义发光Radiobox单选框

之前我们分享过一些CSS3和HTML5实现的自定义checkbox和Radiobox,比如纯CSS3美化Checkbox和Radiobox按钮,不仅外观唯美,而且Radiobox选中时还有动画效果。今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件,该radiobox选中时也有滑块的动画特效。

在线演示        源码下载

3、CSS3自定义美化复选框Checkbox组合

今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化checkbox组合。另外,之前分享过的jQuery实现美化版的单选框和复选框也是非常不错。

在线演示        源码下载

4、HTML5/CSS3开关按钮 立体3D按钮

之前我介绍过几款漂亮的CSS3开关切换按钮,比如这款CSS3渲染Checkbox实现3D开关切换按钮就利用了CSS3和checkbox实现了开关切换按钮。今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的,代码非常简单,3D效果也还可以。

在线演示        源码下载

5、CSS3响应式表单 可切换表单主题

之前我们利用CSS3自定义Checkbox自定义Radiobox,这次要分享的一款CSS3响应式表单不仅美化了checkbox和Radiobox,而且也自定义美化了输入框、下拉框以及多项选择框,几乎所有的表单元素都美化了,而且整体上还不错。另外,这款CSS3表单还可以切换主题,换一下表单风格也是不错的。

在线演示        源码下载

6、非常个性化的CSS3自定义checkbox和radiobox

对于浏览器默认的checkbox和Radiobox样式实在是比较丑陋了,今天分享一款非常个性化的CSS3自定义checkbox和Radiobox,外观非常时尚。之前也分享过几款类似的CSS3插件,比如HTML5自定义Checkbox和RadioboxCSS3漂亮的自定义Checkbox复选框 9款迷人样式

在线演示        源码下载

7、CSS3实现自定义Checkbox动画

我们在html5tricks网站上分享过很多的CSS3自定义checkbox,改造过的checkbox确实比默认的漂亮。今天我们要再来分享一款CSS3自定义checkbox,而且这款checkbox还带有动画效果,当你选中checkbox的时候,会以动画的方式打上一个大大的勾。

在线演示        源码下载

8、jQuery实现美化版的单选框和复选框

之前我们分享过一款CSS3自定义发光radiobox单选框,也在很早的时候分享过一款纯CSS3美化Checkbox和Radiobox按钮。今天这款是利用jQuery实现的美化版单选框和复选框,样式风格非常简洁清爽,是一款很不错的jQuery按钮插件。

在线演示        源码下载

9、CSS3自定义Checkbox特效 5种炫酷效果

今天又要来分享关于美化checkbox的CSS3应用了,这次要分享的自定义checkbox特效一共有5种不同的炫酷效果,其实现也和之前分享的几款HTML5自定义Checkbox和Radiobox 很酷的选中动画、CSS3漂亮的自定义Checkbox复选框 9款迷人样式类似,也是利用定义label样式来实现的。

在线演示        源码下载

10、HTML5自定义Checkbox和Radiobox 很酷的选中动画

浏览器自带的checkbox和Radiobox的样式不仅外观丑陋,而且控制起来也不方便,特别是Checkbox在各个浏览器中的样式都不同,今天我们来利用HTML5和CSS3技术来自定义Checkbox和Radiobox的样式,特别是Checkbox,在选中的时候还有非常酷的选中动画。

在线演示        源码下载

以上就是10个HTML5美化版复选框和单选框,欢迎收藏分享。
原文链接:http://www.html5tricks.com/10-pretty-checkbox-radiobox.html

10个HTML5美化版复选框和单选框的更多相关文章

  1. 【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]

    val()方法不仅能设置元素的值,同时也能获取元素的值.另外,val()方法还有另外一个用处,就是它能使select(下拉列表框).checkbox(多选框)和radio(单选框)相应的选项被选中,在 ...

  2. 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框

    视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  3. Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

    一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  4. 把复选框变成单选框(prop,attr的区别)

    如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...

  5. Jquery学习笔记:操作form表单元素之二(复选框和单选框)

    在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...

  6. 复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)

    复选框.单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)复选框html内容如下:<input type="c ...

  7. 通过jquery将多选框变单选框

    多选框的name值为checkboxlist是复选框选中后更换其他复选框状态. function queryListByParam(e){ $("input[name='checkboxli ...

  8. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. jquery 根据后台传过来的值动态设置下拉框、单选框选中

    更多内容推荐微信公众号,欢迎关注: jquery  根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...

随机推荐

  1. LeetCode--389--找不同

    问题描述: 给定两个字符串 s 和 t,它们只包含小写字母. 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母. 请找出在 t 中被添加的字母. 示例: 输入: s = "ab ...

  2. LeetCode--374--猜数字大小

    问题描述: 我们正在玩一个猜数字游戏. 游戏规则如下: 我从 1 到 n 选择一个数字. 你需要猜我选择了哪个数字. 每次你猜错了,我会告诉你这个数字是大了还是小了. 你调用一个预先定义好的接口 gu ...

  3. 文件上传MultipartBody使用方法

    最近有使用一个文件上传的功能,需要在请求中添加文件,一起传给服务器 Okhttp提供了这个文件添加然后上传的功能 下面给出核心的代码,然后分析一下 //多个文件上传,Filelist private ...

  4. Composer 的学习

    一.Composer简介 Composer 是PHP用来管理依赖关系的工具. 使用 composer 的必要前提有: 1.PHP版本要高于PHP5.3.2 2.PHP支持OpenSSL扩展 3.安装有 ...

  5. git分支重命名

    git branch - m old_name new_name

  6. http认证中的nonce与timestamp解释

    Nonce是由服务器生成的一个随机数,在客户端第一次请求页面时将其发回客户端:客户端拿到这个Nonce,将其与用户密码串联在一起并进行非可逆加密(MD5.SHA1等等),然后将这个加密后的字符串和用户 ...

  7. stl中的transform()注意其与for_each的不同点(有无返回值)

    #include<iostream> using namespace std; #include"vector" #include"algorithm&quo ...

  8. 2018"百度之星"程序设计大赛 - 资格赛 A/B/E/F

    调查问卷  Accepts: 505  Submissions: 2436  Time Limit: 6500/6000 MS (Java/Others)  Memory Limit: 262144/ ...

  9. LeetCode 958. 二叉树的完全性检验

    958. 二叉树的完全性检验  显示英文描述 我的提交返回竞赛   用户通过次数119 用户尝试次数157 通过次数123 提交次数378 题目难度Medium 给定一个二叉树,确定它是否是一个完全二 ...

  10. 浅谈table、form 标签

    1.<table> 标签 1.1包含的元素 <caption></caption>:表头信息. <tr></tr> :定义一个表格行: &l ...