原理

利用label标签，包裹input的时候，点击label等同于点击input,再用背景图片显示选中和取消选中状态

效果

图片




复选

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        input[type='checkbox']{

            display: none;

        }

        label{

            display: inline-block;

        }

        label input[type='checkbox']+span{

            width: 32px;

            height: 32px;

            display: inline-block;

            background: url(images/checkbox.png)no-repeat 0 0 /32px 32px;

        }

        label input[type='checkbox']:checked+span{

            background: url(images/checkbox_checked.png)no-repeat 0 0 /32px 32px;

         }

    </style>

</head>

<body>

<label><input type="checkbox"/><span></span>我</label>

<label><input type="checkbox" checked/><span></span>你</label>

<label><input type="checkbox" checked/><span></span>他</label>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

    $(function(){

        $("input[type='checkbox']").change(function(){

            console.log($("input[type='checkbox']:checked").length);

        })

    })

</script>

</body>

</html>

单选

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        input[type='radio']{

            display: none;

        }

        label{

            display: inline-block;

        }

        label input[type='radio']+span{

            display: inline-block;

            width: 32px;

            height: 32px;

            background: url(images/radio.png)no-repeat 0 0 /32px 32px;

        }

        label input[type='radio']:checked+span{

            display: inline-block;

            width: 32px;

            height: 32px;

            background: url(images/radio_checked.png)no-repeat 0 0 /32px 32px;

        }

    </style>

</head>

<body>

    <label><input type="radio" name="sex"/><span></span>男</label>

    <label><input checked type="radio" name="sex"/><span></span>女</label>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

    $(function(){

//        console.log($("input[type='radio']:checked").length);

        $("input[type='radio']").change(function(){

            console.log($("input[type='radio']:checked").length);

        })

    })

</script>

</body>

</html>

checkbox,radio自定义美化表单的更多相关文章

  1. 学习笔记 第十章 使用CSS美化表单

    第10章   使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1  表单的基本结构 表单包含多个标签,由很多控件组成 ...

  2. CSS3美化表单 移动端可用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. 看用Tornado如何自定义实现表单验证

    我们知道,平时在登陆某个网站或软件时,网站对于你输入的内容是有要求的,并且会对你输入的错误内容有提示,对于Django这种大而全的web框架,是提供了form表单验证功能,但是对于Tornado而言, ...

  4. wordpress 自定义登录表单

    wordpress 有很多插件支持自定义登录表单,本文讨论无插件形式. 自定义登录表单又分为两种 自定义登录表单 在前端创建一个登录页面

  5. 应用Css美化表单

    原来的效果  美化之后的效果  实现代码 <style> .container { margin:0auto; width:620px; } fieldset { padding:18px ...

  6. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  7. 利用 ajax自定义Form表单的提交方式

    需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...

  8. CSS3美化表单控件

    表单的默认控件在不同的浏览器中的样式不同,用户体验很差.用CSS3可以实现表单控件的美化,可以提供更好的用户体验.不足之处就是浏览器的兼容性问题. 一.下拉控件 效果图: 下拉控件的布局结构: < ...

  9. web前端框架之自定义form表单验证

    自定义form验证初试 .在后端创建一个类MainForm,并且在类中自定义host ip port phone等,然后写入方法,在post方法中创建MainForm对象,并且把post方法中的sel ...

随机推荐

  1. UUID与时间戳

    /** * 32位去除'-'的UUID */ public static String getUUID() { String uuid = java.util.UUID.randomUUID().to ...

  2. spring cloud解决eureka的client注册时默认使用hostname而不是ip

    eureka的client注册到server时默认是使用hostname而不是ip.这样的话使用feign client通过eureka进行服务间相互调用时也会使用hostname进行调用,从而调用失 ...

  3. QLIKVIEW添加数据库连接

    1.点击文件 2.点击编辑脚本 3.点击 工具-ODBC管理员 4.添加DSN 5.里面的常规操作不再赘述 6.完成

  4. htaccess 伪静态的规则

    利用htaccess文件可以很好的进行站点伪静态,并且形成的目标地址与真正的静态页面几乎一模一样,如abc.html等,伪静态可以非常好的结合SEO来提高站点的排名,并且也能给人一种稳定的印象. 由于 ...

  5. JAVA数据结构——单链表

    链表:一. 顺序存储结构虽然是一种很有用的存储结构,但是他有如下几点局限性:1. 因为创造线性表的时候已经固定了空间,所以当需要扩充空间时,就需要重新创建一个地址连续的更大的存储空间.并把原有的数据元 ...

  6. Nginx for windows 访问路径包含中文

    转载自http://blog.csdn.net/five824/article/details/48261213 Nginx for windows 访问路径包含中文 原创 2015年09月07日 0 ...

  7. Service层在MVC框架中的意义和职责

    https://blog.csdn.net/u012562943/article/details/53462157 mvc框架由model,view,controller组成,执行流程一般是:在con ...

  8. 吴裕雄--天生自然python编程：pycharm常用快捷键问题

    最近在使用pycharm的时候发现不能正常使用ctrl+c/v进行复制粘贴,也无法使用tab键对大段代码进行整体缩进.后来发现是因为安装了vim插件的问题,在setting里找到vim插件,取消勾选即 ...

  9. c++入门资源

    http://www.cnblogs.com/jackyyang7/articles/2479482.htmlvs2010编译器的使用 https://www.cnblogs.com/me115/ar ...

  10. 吴裕雄--天生自然 python开发学习笔记：下载python离线安装whl文件链接

    https://www.lfd.uci.edu/~gohlke/pythonlibs/