checkbox,radio自定义美化表单
原理
利用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自定义美化表单的更多相关文章
- 学习笔记 第十章 使用CSS美化表单
第10章 使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1 表单的基本结构 表单包含多个标签,由很多控件组成 ...
- CSS3美化表单 移动端可用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 看用Tornado如何自定义实现表单验证
我们知道,平时在登陆某个网站或软件时,网站对于你输入的内容是有要求的,并且会对你输入的错误内容有提示,对于Django这种大而全的web框架,是提供了form表单验证功能,但是对于Tornado而言, ...
- wordpress 自定义登录表单
wordpress 有很多插件支持自定义登录表单,本文讨论无插件形式. 自定义登录表单又分为两种 自定义登录表单 在前端创建一个登录页面
- 应用Css美化表单
原来的效果 美化之后的效果 实现代码 <style> .container { margin:0auto; width:620px; } fieldset { padding:18px ...
- 如何利用WordPress创建自定义注册表单插件
来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...
- 利用 ajax自定义Form表单的提交方式
需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...
- CSS3美化表单控件
表单的默认控件在不同的浏览器中的样式不同,用户体验很差.用CSS3可以实现表单控件的美化,可以提供更好的用户体验.不足之处就是浏览器的兼容性问题. 一.下拉控件 效果图: 下拉控件的布局结构: < ...
- web前端框架之自定义form表单验证
自定义form验证初试 .在后端创建一个类MainForm,并且在类中自定义host ip port phone等,然后写入方法,在post方法中创建MainForm对象,并且把post方法中的sel ...
随机推荐
- css后续篇
5.盒模型 在css中,box model这一术语是用来设计和布局时使用的,在网页中显示一些方方正正的盒子,这种盒子就叫盒模型 盒模型有两种: 标准模型和IE模型(了解) 盒模型属性 width : ...
- Java源码之ArrayList
本文源码均来自Java 8 总体介绍 Collection接口是集合类的根接口,Java中没有提供这个接口的直接的实现类.Set和List两个类继承于它.Set中不能包含重复的元素,也没有顺序来存放. ...
- 【转】HeadFirst 组合模式+迭代器错误原因以及解决代码
http://blog.csdn.net/sugar_girl/article/details/53400267 <HeadFirst JAVA设计模式>中用迭代器迭代组合模式是存 ...
- http 3种web会话管理方式
http是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的,但是对于我们的应用来说,我们是靠用户来管理,而不是靠客户端. ...
- IIS6.0远程命令执行
0X00 漏洞信息: 漏洞编号:CVE-2017-7269 漏洞简述:开启WebDAV服务的IIS 6.0被爆存在缓存区溢出漏洞导致远程代码执行,目前针对 Windows Server2003 R2 ...
- Data Binding on Android
Data Binbing框架是在2015年Google I/O大会上最早提出来的,一直在Android开发者中热议,但是很少有真正在项目中用到.本文简单介绍Data Binding框架的简单用法以及其 ...
- Nginx笔记总结十三:nginx 正向代理
server { listen ; location / { resolver 202.106.0.20 202.106.119.116; resolver_timeout 30s; proxy_pa ...
- python二叉树及叶节点获取 (面试题)
才疏学浅,智商不够,花了一晚上看了二叉树.记录一下: 1.二叉树的遍历 前序遍历:根节点->左子树->右子树 中序遍历:左子树->根节点->右子树 后序遍历:左子树->右 ...
- unittest（22）- p2p项目实战（8）-test_class_auto_incre
# 8.test_class_auto_incre # 使用ddt import requests import unittest from p2p_project_7.tools.http_requ ...
- 吴裕雄--天生自然 R语言开发学习：高级数据管理（续三）
#-----------------------------------# # R in Action (2nd ed): Chapter 5 # # Advanced data management ...