关于input 的选中,自定义input[type="checkbox"]样式
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 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...
随机推荐
- 自己制作ssl证书:自己签发免费ssl证书,为nginx生成自签名ssl证书
这里说下Linux 系统怎么通过openssl命令生成 证书. 首先执行如下命令生成一个key openssl genrsa -des3 -out ssl.key 1024 然后他会要求你输入这个ke ...
- 【echarts3】--1 简单入门
echarts3 相信大家都了解吧,是百度研发的 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8 ...
- Python自动化--语言基础2--运算符、格式化输出、条件语句、循环语句、列表、元组
运算符包括:算术运算符.比较运算符.赋值运算符.逻辑运算符.成员运算符.身份运算符 算术运算符 % 取模(余数) // 取相除的整数部分 / (5/2=2.5) 比较运算符 == 等于 ! ...
- Java中Excel表格的上传与下载
详见:http://blog.csdn.net/lzh657083979/article/details/73252585
- Js中的subStr和subString的区别
/** * Created by lonecloud on 16/9/8. */ var str="HelloWorld"; /** * 这里的两个参数第一个是从0到第几个开始第二 ...
- typeof操作符 返回值
Type操作符 返回值 : 1undefined 这个未定义 2.boolean 这个为boolean类型 3.string 这个是字符串 4.number 这个就是数值 5 ...
- java8 - IO
一.学习大纲: 1. 字符编码格式 2. 文件操作(实现文件的增.删.改.查等操作) 3. 目录操作(实现目录的增.删.改.查等操作) 4. 数据传输(实现对文件内容的读.写等操作) 二.关联类: 1 ...
- 轻松搭建Git服务器(Ubuntu)
搭建Git服务器 在远程仓库节中,我们讲了远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改. GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业 ...
- MSQL的基准测试
Mysql基准测试 基准测试 直接.简单.易于比较,用于评估服务器的处理能力 压力测试 对真实的月数据进行测试,获得真是系统所能承受的压力 基准测试的目的 1.建立MySQL服务器的性能基准线 2.模 ...
- CSRF的本质及防御
本质:产生的原因本质上是参数可知或可预测 防御: 1.加密参数:加密加盐,不可知,不可预测 忧虑,引入其他麻烦:一.数据分析困难 ...