<!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. read指令使用方法

    read命令用于从标准输入中读取输入单行,并将读取的单行根据IFS变量分裂成多个字段,并将分割后的字段分别赋值给指定的变量列表var_name.第一个字段分配给第一个变量var_name1,第二个字段 ...

  2. Visual Studio 2017 初次体验

    在初次体验中遇到以下问题以及技巧 1. 在出现红色波浪线时为出现错误语法,将鼠标移动到相应位置可以获得相关错误信息 2.在编写代码过程中,行号上出现的小黄灯可以有提示信息 3.List 与 Array ...

  3. 设置虚拟机里的Centos7的IP

    输入ip查询命名 ip addr  也可以输入 ifconfig查看ip,但此命令会出现3个条目,centos的ip地址是ens33条目中的inet值. 发现 ens33 没有 inet 这个属性,那 ...

  4. 必须使用member initialization list来初始化的情况

    // member initialization #include <iostream> using namespace std; class Circle { double radius ...

  5. [转载]C#中使用ADO.NET连接SQL Server数据库，自动增长字段用作主键，处理事务时的基本方法

    问题描述: 假设在数据库中存在以下两张数据表: User表,存放用户的基本信息,基本结构如下所示:   类型 说明 ID_User int 自动增长字段,用作该表的主键 UserName varcha ...

  6. D3DXCreateTexture

    HRESULT D3DXCreateTexture( __in LPDIRECT3DDEVICE9 pDevice, __in UINT Width, __in UINT Height, __in U ...

  7. CART树 python小样例

    决策树不断将数据切分成小数据集,直到所有目标变量完全相同,或者数据不能再切分为止,决策时是一种贪心算法,它要在给定的时间内做出最佳选择,但并不关心能否达到最优 树回归 优点:可以对复杂和非线性的数据建 ...

  8. 03014_EL技术

    1.EL表达式概述 EL(Express Language)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本的编写. 2.EL从域中取出数据(EL最重要的作 ...

  9. 继承Thread类使用多线程

    java实现多线程有两种方式,一种是继承Thread类,另外一种就是实现Runnable接口. 两种实现方法的优缺点: 使用Thread类实现多线程局限性就是不支持多继承,因为java是不支持类多继承 ...

  10. Android资源限定符

    Android系统会根据设备参数,自动选择最佳资源配置方案. Android中常见的资源限定符: 屏幕特征 限定符 描述 大小 small 提供给小屏幕设备的资源 normal 提供给中等屏幕设备的资 ...