1、css 呈现
选中后 的input的样式可以用 /*背景图*/
background:url('../pc/images/archives/icon_choosed.png') no-repeat center center; )
代码
/*input 选中前的样式*/
input[type="checkbox"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
width:20px;
height:20px;
border-radius:2px;
text-align:center;
line-height:20px;
border:1px solid #ddd;
}
/*input 选中后的样式 */
input[type="checkbox"]:checked + label::before {
background:url('../pc/images/archives/icon_choosed.png') no-repeat center center;/*背景图的写法是生效的*/
border:none;
} /*拓展**/
input[type="checkbox"]:checked + label::before {
content: "\2713";
background-color: yellowgreen;
}
生成效果为:
2、 现在把原来的复选框隐藏:
input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
3、注意 label 的 for与input 的 id 要保持一致:动态生成法
str1+='<div class="clearfix item cursor" data-isMember="'+isMember+'" data-userId="'+userId+'" >';
str1+= '<span class="pull-left">'+'<span class="userName">'+userName+'</span>'+'-'+courseCount+'节</span>';
str1+= '<span class="pull-right">';
str1+= '<input type="checkbox" id="awesome_'+i+'" data-userId="'+userId+'" data-courseFeeId="'+courseFeeId+'" onclick="adddMemberCourse(this)">';
str1+= '<label for="awesome_'+i+'"></label>';
str1+= '</span>';
str1+='</div>'; //标记选中的input
function adddMemberCourse(obj){ var checked = $(obj).attr("checked");
if(checked == "checked"){
$(obj).removeAttr("checked");
}else{
$(obj).attr("checked","checked");
}
}
//获取选中的input
$('#selectTime .timeshow:eq('+i+') .item').each(function(){
var checked = $(this).find('input').attr("checked");
if(checked == 'checked'){
courseIds += $(this).attr('data-timeid')+"-";
}
});
参考 https://www.cnblogs.com/xinjie-just/p/7302020.html
关于input 的选中,自定义input[type="checkbox"]样式的更多相关文章
-
定制 input[type=";radio";] 和 input[type=";checkbox";] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
-
自定义input[type=";checkbox";]样式
input[type=checkbox] { visibility: hidden; position: relative;} input[type=checkbox]:after { content ...
-
如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?
总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...
-
修改 input[type=";radio";] 和 input[type=";checkbox";] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
-
使用<;label>;标签修改input[type=";checkbox";]的样式
因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...
-
[转]Android中自定义checkbox样式
android中自定义checkbox的图片和大小 其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=" ...
-
原生javascript自定义input[type=checkbox]效果
2018年6月27日 更新 能用css3,就不用js 用纯css3实现样式重写 <!DOCTYPE html> <html lang="en"> < ...
-
jsp <;input type=";checkbox"; name=";fileId";>; 是否选中
jsp <input type="checkbox" name="fileId"> 是否选中 var a = document.getElement ...
-
自定义input[type=";checkbox";]的样式
对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...
随机推荐
-
简单的C语言文法
<程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...
-
Bash 里的转义序列
在 Bash 里,一共有五个地方支持反斜杠开头的转义序列,包括两个内部命令 echo 和 printf 的参数里,字符串语法 $'...' 里,还有四个提示符变量 PS1-PS4 里,以及在 Read ...
-
maven基本用法
一.下载及安装 1.1 下载maven 3.1.1 先到官网http://maven.apache.org/download.cgi 下载最新版本(目前是3.1.1 ),下载完成后,解压到某个目录(本 ...
-
Linux下apache+phppgadmin+postgresql安装配置
Linux下apache+phppgadmin+postgresql安装配置 操作系统:CentOS 安装包:httpd(首选yum), php(包括php以及php-pgsql,php-mbstri ...
-
Code First04---关于上下文DbContext
这章主要讲怎么配置DbContext的子类访问的数据库的位置. 我相信大家最经常使用的数据库位置的配置方式就是配置文件了,也就是通过App.Config 或Web.Config来配置要访问的数据库. ...
-
《objective-c基础教程》学习笔记(七)—— 存取方法
在上一篇博文中,我们有拿一个简单的“汽车模型”来讲解复合关系.在今天的这篇博文中,我们将接着上一次的例子,讲解下存取(accessor)方法的使用.所谓存取方法,就是用来读取或改变某个对象属性的方法. ...
-
ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件
原文:ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件 先看效果图,然后上代码: <UserControl x:Class= ...
-
sharepint 数据视图 添加超链接
1. 数值域清除数值,输入文本 详细进度 2. 添加连接 到 哪个页面 3. 将inteid拖过来 4. 连接到项目显示表单 5. 直接改下面的连接地址 <a href="http:/ ...
-
引擎设计跟踪(九.8) Gizmo helper实现与多国语言
最近把gizmo helper的绘制做好了. 1.为了复用代码,写了utility来创建sphere, cube, cylinder, plane, ring(line), circle(solid) ...
-
03 JVM的垃圾回收机制
1.前言 理解JVM的垃圾回收机制(简称GC)有什么好处呢?作为一名软件开发者,满足自己的好奇心将是一个很好的理由,不过更重要的是,理解GC工作机制可以帮助你写出更好的Java程序. 在学习GC前,你 ...