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

Posted xiaoshen666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于input 的选中,自定义input[type="checkbox"]样式相关的知识,希望对你有一定的参考价值。

原文

1、css 呈现

   选中后 的input的样式可以用 /*背景图*/

     background:url(‘../pc/images/archives/icon_choosed.png‘) no-repeat center center;  )

代码

技术图片
 1 /*input 选中前的样式*/
 2 input[type="checkbox"] + label::before {
 3     content: "a0";  /*不换行空格*/
 4     display: inline-block;
 5     width:20px;
 6     height:20px;
 7     border-radius:2px;
 8     text-align:center;
 9     line-height:20px;  
10     border:1px solid #ddd;
11 }
12 /*input 选中后的样式 */
13 input[type="checkbox"]:checked + label::before {
14     background:url(‘../pc/images/archives/icon_choosed.png‘) no-repeat center center;/*背景图的写法是生效的*/
15     border:none;
16 }

/*拓展**/
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标签checkbox属性 和checked

如何定义input标签中 type="text"的CSS样式

自定义input[type="file"]的样式

自定义input[type="file"]的样式

自定义input[type="radio"]的样式