原理

利用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. mysql 查询a表在b表中不存在的记录

    select * from tbl_user a where(select count(1) as cnt from tbl_order b where a.phone=b.phone)=0

  2. 十一、linux-mysql的多种日志和引擎文件实战

    一.多种日志 mysql生成或者相关联的日志文件种类繁多,本节重点关注与mysql数据库服务相关的几类日志文件. 错误日志(error  log) :记录mysql服务进程mysqld在启动/关闭或者 ...

  3. replace|同时替换

    a= 'eeekkksksksk' print a.replace('e','s').replace('s','k') #kkkkkkkkkkkk change={"e":&quo ...

  4. java高并发之线程池

    Java高并发之线程池详解   线程池优势 在业务场景中, 如果一个对象创建销毁开销比较大, 那么此时建议池化对象进行管理. 例如线程, jdbc连接等等, 在高并发场景中, 如果可以复用之前销毁的对 ...

  5. JVM相关面试题

    1.JVM 基本机构 1.1 类加载子系统负责从文件系统或者网络中加载Class信息,加载的类信息存放于一块称为方法区的内存空间.除了类的信息外,方法区中可能还会存放运行时常量池信息,包括字符串字面量 ...

  6. oracle ORA-01461 错误 can bind a LONG value only for insert into a LONG column

    我的ORACLE表里没有long字段,可是保存时报错:  ORA-01461 :仅可以为插入LONG列的LONG值赋值  本来我这张表里只有一个VARCHAR2(4000)的字段,一直没有这种错误发生 ...

  7. mysql操作命令梳理-grant授权和revoke回收权限

    在mysql维护工作中,做好权限管理是一个很重要的环节.下面对mysql权限操作进行梳理: mysql的权限命令是grant,权限撤销的命令时revoke:grant授权格式:grant 权限列表 o ...

  8. 74）PHP，Session的一些属性

    (1) (2)有效期在  会话周期结束(就是将浏览器关闭前) (3)有效路径:  整站都有效 (4)有效域:当前域 (5)是否安全传输:否 (6)以上的session数据的特征都是由一个问题导致的,就 ...

  9. python-django-celery的安装和配置_20191122

    celery的介绍 celery有三个核心的概念: 任务的发出者(需要发邮件的一方),我们项目的代码就相当于发出者, 中间是一个任务队列(中间人broker),这里我们使用Redis来承担任务队列的作 ...

  10. 【Java集合】试读LinkedList源码

    LinkedList的本质是双向链表.(01) LinkedList继承于AbstractSequentialList,并且实现了Dequeue接口. (02) LinkedList包含两个重要的成员 ...