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 ...
随机推荐
- docker-compose up Windows named pipe error:(code: 2)
执行docker-compose up启动项目时,报如下错误: ERRORERROR: Windows named pipe error: 膸碌脥艂艕艊藳禄碌藵脰赂露篓碌脛脦脛慕牛藝艁 (code: ...
- 吴裕雄--天生自然C语言开发：数据类型
#include <stdio.h> #include <limits.h> int main() { printf("int 存储大小 : %lu \n" ...
- markdown 的一些字体
<font face='Comic Sans MS', size=5> 看看字体 1 one Hello 2 two Hello <font face='Kristen ITC', ...
- fiddler修改请求表单数据
一.使用出发点:进行测试某个添加编辑功能时候,部分字段前端限制了字段长度或者SQ,特殊字符等等的输入: 但是我们测试验证后端服务器是否处理,这个时候去修改提交请求表单,绕过前端的限制进行测试: 二.使 ...
- Linux_新建用户
目录 1.新增用户 2.增加密码 新增用户:cn 进入root 输入新建命令 cn就是我们的新的用户名,也可以换成其他的 sudo useradd cn 接下来发现没有反应,是正常的,如图 查看是否新 ...
- perf4j+logback配置 非spring 可使用注解
最近项目打算使用perf4j进行性能监控,由于项目没有使用spring,而又不想对代码入侵过高,打算使用注解的方式进行接入.perf4j采用AspectJ库实现AOP. 具体接入方法如下: logba ...
- 【Linux_Shell 脚本编程学习笔记五、Oracle JDK1.8 安装shell 脚本】
脚本使用说明: 首先在脚本的同级目录下有个 jdk的安装包 脚本和安装包必须在同级目录下才能够安装(脚本没有优化,还可以使用 wget 从网上下载指定版本的 jdk 安装包) #!/bin/sh ...
- Java IO: Reader和Writer
作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) Reader 原文链接 Reader是Java IO中所有Reader的基类.Reader与Input ...
- nodejs 客户端证书设置。
最近的系统要求较高的安全等级 https+usbkey证书 https的操作很简单 openssl 生成ca 和证书,配置启动即可 生成成功后,类似这样. 类似这样 var options = { k ...
- 应用场景：vue表格撤销删除与保存按钮的显隐
应用场景:vue表格撤销删除与保存按钮的显隐