原理

利用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. kubernets基于容器日志的报警和服务自动恢复

    demo地址 https://github.com/cclient/kubernetes-filebeat-collector 高可用还谈不上,是对kubernete一种服务异常重启恢复的补充方案 之 ...

  2. SpringBoot 系列 - 自己写starter

    原文地址: https://www.xncoding.com/2017/07/22/spring/sb-starter.html 前言: Spring Boot由众多Starter组成,随着版本的推移 ...

  3. MySQL之数据存储引擎

    1.什么是存储引擎: 现实生活中我们用来存储数据的文件有不同的类型,每种文件类型对应各自不同的处理机制:比如处 理文本用txt类型,处理表格用excel,处理图片用png等,数据库中的表也应该有不同的 ...

  4. 1005 继续(3n+1)猜想 (25 分)

    题目:链接 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n=3 ...

  5. iOS高仿微信悬浮窗、忍者小猪游戏、音乐播放器、支付宝、今日头条布局滚动效果等源码

    iOS精选源码 iOS WKWebView的使用源码 模仿apple music 小播放器的交互实现 高仿微信的悬浮小窗口 iOS仿支付宝首页效果 [swift]仿微信悬浮窗 类似于今日头条,网易新闻 ...

  6. bat连接映射盘

    net use h: \\IP地址\目录 "密码" /user:"用户名"

  7. Qt5 提示：无法启动此程序，计算机丢失Qt5Widgetsd.dll的解决方法

    Qt5工程编译生成可执行的exe文件之后,运行提示无法启动此程序,计算机丢失Qt5Widgetsd.dll… 原因是没有设置好Qt5的环境变量,解决方法如下: 1.打开[环境变量],(不同的系统会有不 ...

  8. 3DMAX安装未完成，某些产品无法安装的解决方法

    3DMAX提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装3DMAX失败提示3DMAX安装未完成,某些产品无法安装,也有时候想重新安装3DMAX的时候会出现本 ...

  9. abator中可生成iBatis的代码

    1.insert 不论你设置多少个字段,统一都要添加一遍 比如:insert into tb_user (id,name,age,password) value (null,”张三”,null,nul ...

  10. [洛谷P3366] [模板] 最小生成树

    存个模板,顺便复习一下kruskal和prim. 题目传送门 kruskal 稀疏图上表现更优. 设点数为n,边数为m. 复杂度:O(mlogm). 先对所有边按照边权排序,初始化并查集的信息. 然后 ...