<!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. Python操作SQLLite（基本操作）

    SQLite 是一个软件库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数据库引擎.SQLite 是在世界上最广泛部署的 SQL 数据库引擎.SQLite 源代码不受版权限制. Pyth ...

  2. Olympic Class Ships【奥林匹克级邮轮】

    Olympic Class Ships You probably know about the Titanic, but it was actually just noe of three state ...

  3. python数据排序

    1.原地排序 data.sort() #对原列表进行排序 2.复制排序 data2 = sorted(data) #原列表不变,作为参数传给sorted()方法进行排序

  4. RCP 项目启动图片设置

    第一步 选择启动图片命名为 splash.bmp 第二步 添加 扩展点 然 后在右边的扩展元素细节中填入相应的信息,比如我们在这里的application属 性 为 org.vwpolo.rcp.ex ...

  5. Go语言之并发编程（三）

    Telnet回音服务器 Telnet协议是TCP/IP协议族中的一种.它允许用户(Telnet客户端)通过一个协商过程与一个远程设备进行通信.本例将使用一部分Telnet协议与服务器进行通信. 服务器 ...

  6. Elastic Search和Kibana入门

    一.ES配置 二.ES本地快速搭建集群 查看ES集群 查看node详细情况 三.Kibana配置 修改kibana的es配置 访问localhost:5601端口 四.Elasticsearch 术语 ...

  7. leetcode 【 Set Matrix Zeroes 】python 实现

    题目: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. cl ...

  8. 对于xss等有关的html，url，unicode编码做的一个小总结。

    参考:http://bobao.360.cn/learning/detail/292.html,算是对前部分作一个总结性的学习. 1<a href="%6a%61%76%61%73%6 ...

  9. 【bzoj3916】[Baltic2014]friends 字符串hash

    题目描述 有三个好朋友喜欢在一起玩游戏,A君写下一个字符串S,B君将其复制一遍得到T,C君在T的任意位置(包括首尾)插入一个字符得到U.现在你得到了U,请你找出S. 输入 第一行一个数N,表示U的长度 ...

  10. java _tomcat_mysql 部署

    项目做完了,要发布了,而Java的特长之一就是移植性好,面对着微软的XP的停止服务,Windows系统的“独裁”,越来越多的商家选择了开源的免费的linux系统作为服务器.因为linux系统也有图形界 ...