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 ...
随机推荐
- java代码实现数据源切换(连接池简单粗暴)
--最佳实践配置(.yml) gs.oracle: #driverClassName: oracle.jdbc.driver.OracleDriver driverClassName: oracle. ...
- AC和路由器
无线AC控制器是一种网络设备,比如我曾接触过的丰润达的AC100和AC180等,用它们可以来集中控制和管理无线AP,比如下发配置.修改相关配置参数.射频智能管理.接入安全控制等. 路由器是一种连接多个 ...
- 卸载python3
rpm -qa|grep python3|xargs rpm -ev --allmatches --nodeps 卸载pyhton3 whereis python3 |xargs rm -frv 删除 ...
- PAT甲级——1006 Sign In and Sign Out
PATA1006 Sign In and Sign Out At the beginning of every day, the first person who signs in the compu ...
- python语法基础-网络编程-HTTP协议
############### HTTP协议 ############## """ 当你在浏览器地址栏敲入“http://www.cnblogs.com/”, ...
- git基本操作-长期维护
############### 初识git ############## """ git初识: 1,git是什么?git是一个帮助用户版本控制的软件, 2,g ...
- locate及find查找命令
在文件系统上查找符合条件的文件: 实现工具:locate,find locate: 依赖于事先构建好的索引库: 系统自动实现(周期性任务): 手动更新数 ...
- Java基础语法要点
1.Java中byte.short.int.long的取值范围 byte:[-128,127] short:[-32768,32767] int:[-2147483648,2147483647] lo ...
- 使用ArcGIS实现WGS84经纬度坐标到北京54高斯投影坐标的转换
[摘 要] 本文针对从事测绘工作者普遍遇到的坐标转换问题,简要介绍ArcGIS实现WGS84经纬度坐标到北京54高斯投影坐标转换原理和步骤. [关键词] ArcGIS 坐标转换 投影变换 1 坐标转换 ...
- 对Java8新的日期时间类的学习（二）
示例11 在Java中如何判断某个日期是在另一个日期的前面还是后面 这也是实际项目中常见的一个任务.你怎么判断某个日期是在另一个日期的前面还是后面,或者正好相等呢?在Java 8中,LocalDate ...