关于input 的选中,自定义input[type="checkbox"]样式

时间:2022-12-17 19:12:24

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;
}

生成效果为:

  关于input 的选中,自定义input[type="checkbox"]样式

  关于input 的选中,自定义input[type="checkbox"]样式

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"]样式的更多相关文章

  1. 定制 input&lbrack;type&equals;&quot&semi;radio&quot&semi;&rsqb; 和 input&lbrack;type&equals;&quot&semi;checkbox&quot&semi;&rsqb; 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  2. 自定义input&lbrack;type&equals;&quot&semi;checkbox&quot&semi;&rsqb;样式

    input[type=checkbox] { visibility: hidden; position: relative;} input[type=checkbox]:after { content ...

  3. 如何在 messager&sol;alert&sol;confirm等消息提示框中 获取 &sol; 设置 嵌入 html内容中的 input&lbrack;type&equals;checkbox&rsqb;等的选中状态&quest;

    总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...

  4. 修改 input&lbrack;type&equals;&quot&semi;radio&quot&semi;&rsqb; 和 input&lbrack;type&equals;&quot&semi;checkbox&quot&semi;&rsqb; 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  5. 使用&lt&semi;label&gt&semi;标签修改input&lbrack;type&equals;&quot&semi;checkbox&quot&semi;&rsqb;的样式

    因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...

  6. &lbrack;转&rsqb;Android中自定义checkbox样式

    android中自定义checkbox的图片和大小   其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=&quot ...

  7. 原生javascript自定义input&lbrack;type&equals;checkbox&rsqb;效果

    2018年6月27日  更新 能用css3,就不用js 用纯css3实现样式重写 <!DOCTYPE html> <html lang="en"> < ...

  8. jsp &lt&semi;input type&equals;&quot&semi;checkbox&quot&semi; name&equals;&quot&semi;fileId&quot&semi;&gt&semi; 是否选中

    jsp <input type="checkbox" name="fileId"> 是否选中 var a = document.getElement ...

  9. 自定义input&lbrack;type&equals;&quot&semi;checkbox&quot&semi;&rsqb;的样式

    对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...

随机推荐

  1. 简单的C语言文法

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→&lt ...

  2. Bash 里的转义序列

    在 Bash 里,一共有五个地方支持反斜杠开头的转义序列,包括两个内部命令 echo 和 printf 的参数里,字符串语法 $'...' 里,还有四个提示符变量 PS1-PS4 里,以及在 Read ...

  3. maven基本用法

    一.下载及安装 1.1 下载maven 3.1.1 先到官网http://maven.apache.org/download.cgi 下载最新版本(目前是3.1.1 ),下载完成后,解压到某个目录(本 ...

  4. Linux下apache&plus;phppgadmin&plus;postgresql安装配置

    Linux下apache+phppgadmin+postgresql安装配置 操作系统:CentOS 安装包:httpd(首选yum), php(包括php以及php-pgsql,php-mbstri ...

  5. Code First04---关于上下文DbContext

    这章主要讲怎么配置DbContext的子类访问的数据库的位置. 我相信大家最经常使用的数据库位置的配置方式就是配置文件了,也就是通过App.Config 或Web.Config来配置要访问的数据库. ...

  6. 《objective-c基础教程》学习笔记(七)—— 存取方法

    在上一篇博文中,我们有拿一个简单的“汽车模型”来讲解复合关系.在今天的这篇博文中,我们将接着上一次的例子,讲解下存取(accessor)方法的使用.所谓存取方法,就是用来读取或改变某个对象属性的方法. ...

  7. ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件

    原文:ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件 先看效果图,然后上代码: <UserControl x:Class= ...

  8. sharepint 数据视图 添加超链接

    1. 数值域清除数值,输入文本 详细进度 2. 添加连接 到 哪个页面 3. 将inteid拖过来 4. 连接到项目显示表单 5. 直接改下面的连接地址 <a href="http:/ ...

  9. 引擎设计跟踪&lpar;九&period;8&rpar; Gizmo helper实现与多国语言

    最近把gizmo helper的绘制做好了. 1.为了复用代码,写了utility来创建sphere, cube, cylinder, plane, ring(line), circle(solid) ...

  10. 03 JVM的垃圾回收机制

    1.前言 理解JVM的垃圾回收机制(简称GC)有什么好处呢?作为一名软件开发者,满足自己的好奇心将是一个很好的理由,不过更重要的是,理解GC工作机制可以帮助你写出更好的Java程序. 在学习GC前,你 ...