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 ...
随机推荐
- 二十一、NFS服务
文件系统是基于存储设备的,比如硬盘,并且包含文件物理位置的维护.文件系统也可以说是虚拟数据或网络数据存储的方法,比如NFS.我是这样理解的:首先,什么是文件系统,这里我们已经明确了,就是组织的一种形式 ...
- P2486 [SDOI2011]染色 区间合并+树链剖分（加深对线段树的理解）
#include<bits/stdc++.h> using namespace std; ; struct node{ int l,r,cnt,lazy; node(,,,):l(l1), ...
- 把Java代码转成c#可用的dll
1.首先你需要到 IKVM官网 下载IKVM.http://sourceforge.net/projects/ikvm/files/,需要注意的是如果你用的是.net framework2.0,那么最 ...
- laravel如何输出最后一条执行的SQL
\DB::connection()->enableQueryLog(); // 开启查询日志 \DB::table('xxx'); // 要查看的sql $queries = \DB::getQ ...
- 吴裕雄 python 神经网络——TensorFlow 卷积神经网络水果图片识别
#-*- coding:utf- -*- import time import keras import skimage import numpy as np import tensorflow as ...
- mysql中造3千条数据（3种方法）
方法一:存储过程 1.存储过程如下: delimiter $$ DROP PROCEDURE IF EXISTS data CREATE PROCEDURE data(in i int) BEGIN ...
- 安装php5.4 mv9 +apache2.2+mysql5.5问题好多。
1 网站目录的设置,网站 默认文件的加载. 2 php.ini文件的加载问题.
- 总结verilog产生随机数的$random和seed
$random(seed)是verilog中最简单的产生随机数的系统函数. 在调用系统函数$random(seed)时,可以写成三种样式:1)$random,2)$random(),3)$rand ...
- Linux查看后台任务，关闭后台任务
jobs查看后台任务, kill %num关闭相应的后台任务
- insecticide|contradictions| at large|delay doing|
N-MASS 杀虫剂;杀虫药Insecticide is a chemical substance that is used to kill insects. Spray the plants wit ...