<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<style type="text/css">

input[type=radio]{
width: 100px;
height:100px;
background: url('222.jpg') no-repeat center;
background-size: cover;
border:3px solid red ;
-webkit-appearance: none
}
input[type=radio]:checked{
border-color: green;
outline: 0;

}

input[type=checkbox]{
width: 100px;
height:100px;

background: red;
border:3px solid red ;
-webkit-appearance: none
}
input[type=checkbox]:checked{
background: green;
outline: 0
}

</style>
</head>
<body>
<input type="radio" name="aa">
<input type="radio" name="aa">
<input type="checkbox" name="aa">
<input type="checkbox" name="aa">
<input type="checkbox" name="aa">
<input type="checkbox" name="aa">
<script>
</script>
</body>
</html>

利用input-radio和input-checkbox的表单特性可以节省很多js代码的更多相关文章

  1. vue的表单的简单介绍 input radio checkbox等表单特性

    在vue中我们可以通过v-model来为表单元素实现双向绑定 1:v-model指令 数据的双向绑定 双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V),还是当视图的内容改变(V)去影响模 ...

  2. 表单添加缩略图及截图js代码

    此为表单提交是上传截图的代码,待优化: // 添加小程序图片 function addAvatar(obj){ var file = obj.files[0]; limit($('.avatar_bo ...

  3. Jquery Validate不是用submit按钮提交表单，使用a标签js代码都可以

    不多说,上代码. $("#form").validate(); $("#btn").click(function() { if($("#form&qu ...

  4. 怎样利用WordPress创建自己定义注冊表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  5. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  6. i利用图片按钮 和 input type="image" 为背景提交表单

    <img src="img/cancel.jpg" onclick="javascript:document.getElementByIdx_x('loginFor ...

  7. Form 表单中的Input元素回车时不保存表单

    在Form表单中如果直接在Input元素里敲回车键,那么默认将提交表单,可以通过keydown事件取消默认此操作 $("form").live('keydown',function ...

  8. input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit() 无刷新ajax提交表单.

    1.使用disabled input , button  textarea 可以 被 禁用, 禁用的效果 : 1) 上面的点击事件无法使用 --- button       : 下面的 onclick ...

  9. form表单中只有一个input时，按回车键后表单自动提交(form表单的一个小坑)

    form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...

随机推荐

  1. SQL初次接触

    1.SQL对大小写不敏感 2.部分SQL数据库要求结尾分号 3.分为两种DML(数据操作语言)和DDL(数据定义语言) sql中一些注意要点 1.设置主键 一般会在一个数据内设置一个主键(名字通常为i ...

  2. pycharm配置Git托管

    利用Pycharm和github管理代码转载https://www.cnblogs.com/feixuelove1009/p/5955332.html git教程--廖雪峰git教程  转载https ...

  3. python之时间处理time模块

    import time import datetime ''' print(time.time()) #返回当前系统时间戳 print(time.ctime()) #返回当前系统时间 print(ti ...

  4. Redis实现之整数集合

    整数集合 整数集合(insert)是集合键的底层实现之一,当一个集合只包含整数值元素,并且这个集合的元素数量不多时,Redis就会使用整数集合作为集合键的底层实现.举个栗子,如果我们创建一个只包含五个 ...

  5. error LNK2001: unresolved external symbol ___CxxFrameHandler3

    Q:  VS2005编译的静态库, 在vc++6.0中连接出现错误 error LNK2001: unresolved external symbol ___CxxFrameHandler3 A:   ...

  6. Hadoop数据管理介绍及原理分析

    Hadoop数据管理介绍及原理分析 最近2014大数据会议正如火如荼的进行着,Hadoop之父Doug Cutting也被邀参加,我有幸听了他的演讲并获得亲笔签名书一本,发现他竟然是左手写字,当然这个 ...

  7. jenkins忘记管理员登陆密码

    配置文件的路径在.../jenkins/config.xml (线上路径是/usr/local/tomcat7/webapps/jenkins/config.xml) 修复办法:千万注意:修复前一定要 ...

  8. nyoj 325

    zb的生日 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 今天是阴历七月初五,acm队员zb的生日.zb正在和C小加.never在武汉集训.他想给这两位兄弟买点什么 ...

  9. PAT1032

    为了用事实说明挖掘机技术到底哪家强,PAT组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第1行给出不超过105的正整数N,即参赛人数.随后N行,每行给出一位 ...

  10. POJ-1087 二分图匹配，最大流。

                                                      A Plug for UNIX 题意很迷,不过很水. 题意:一个房间有m个插座,每个插座有一个型号, ...