CSS自定义控件之checkbox控件

checkbox自定义控件概述

这个控件属于html自带的控件,本身有样式。在制作这样的控件时,需要CSSjavascript两方面共同努力,才能实现全新的控件样式:CSS覆盖原有的样式、实现新的样式;JS实现点击等动作的动态显示。我们先看HTML结构,再一步步看CSS代码。

radio控件和checkbox控件的定义方式也是一样的流程。下面是checkbox的最终两种效果图:

HTML代码

<div class="input_custom">
    <div class="custom-checkbox">
        <input name="signup" type="checkbox" checked  id="checkbox1" >
        <label for="checkbox1" class="checked">Checked</label>
    </div>

    <div class="custom-checkbox">
        <input name="signup" type="checkbox"   id="checkbox2"  >
        <label for="checkbox2" >Unchecked</label>
    </div>

     <div class="checkbox-large">
        <div class="custom-checkbox">
            <input name="signup" type="checkbox"   id="checkbox3"  >
            <label for="checkbox3" ></label>
        </div>
    </div>

    <div class="checkbox-large">
        <div class="custom-checkbox">
            <input name="signup" type="checkbox"  checked id="checkbox4"  >
            <label for="checkbox4" ></label>
        </div>
    </div>

</div>

inputidlabelfor值需要设置,并且需要一致,主要用于后面的javascript,在下文谈到javascript的时候再说。

CSS代码

  1. 设置custom-checkbox相对布局,并且对浏览器自带的checkbox样式进行处理。

     .custom-checkbox { position:relative;}
     .custom-checkbox input,.custom-radio input {  display: none;}
    
  2. 全新的custom-checkbox主要是使用label来显示文字,并通过右移label,把新的check-box样式显示出来,这里主要把新的custom-chekbox用于label背景,我们看看是怎么做的,具体看代码的注释。

     .custom-checkbox label {
         display:block;          //设置为块级元素,否则显示会有问题
    
         height:27px; 
         line-height:27px; //通过行高和高度的设置,保证文字垂直居中
         
         padding-left:36px;  //将label的文字右移,为新的custom-chekbox样式预留空间
    
         margin-bottom:8px; 
    
         cursor:pointer;  //修改鼠标显示样式
         color:#6f6f6f;
     }
    
  3. 放置新的custom-checkbox样式,并依据是否选中,设置不同的background-position,以显示不同状态下的custom-checkbox

     .custom-checkbox label { 
         background:url(images/styled_checkbox.png) no-repeat; 
         background-position:-7px -10px; //custom-checkbox未选中状态
     }
    
     .custom-checkbox label.checked { 
         background-position:-7px -110px; //custom-checkbox选中状态
         color:#5c5c5c;
     }
    
  4. 另一种样式的custom-checkbox

     .checkbox-large .custom-checkbox label { 
         background:url(images/styled_checkbox_large.png) no-repeat; height: 37px; line-height: 33px; padding-left:95px;
         background-position:0 0;                //custom-checkbox未选中状态
     }
    
     .checkbox-large .custom-checkbox label.checked { 
         background-position:0 -100px;   //custom-checkbox选中状态
     }   
    

javascript代码

javascript代码主要响应用户的点击。这里面使用了jquery(或者更小的,通常移动端使用的,jquery替代版本——zepto.js)。这里使用jquery,主要是因为方便。当然,你也可以直接通过DOM操作来实现这里的功能,不过要稍微麻烦一些。

这里的javascript的思路就是依据input的checked状态,动态地为label添加checked类或者移除checked类。我们来看一下代码:

$('div[class=input_custom] input').each(function(){ //选择合适的input元素

    if($(this).is('[type=checkbox],[type=radio]')){ //此处的代码也适合自定义radio按钮
        var input = $(this); 
        var label = $('label[for='+input.attr('id')+']'); //还记得上面的html代码吗?此处就用到了input的id和label的for
        
        input.bind('updateState', function(){   
            input.is(':checked') ? label.addClass('checked') : label.removeClass('checked'); }) 
            .trigger('updateState')
            .click(function(){ $('input[name='+ $(this).attr('name') +']').trigger('updateState'); });//绑定点击事件
    }
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,076评论 25 708
  • 前端工程师和设计师一直都是相爱相杀的两个人。 在拿到UI稿时设计师告诉我要做到99%还原。。。满脸黑线( ̄工 ̄ll...
    Candy_M阅读 3,589评论 0 3
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,599评论 32 459
  • 一寸一寸 迈向蹉跎。
    寂寂牵牛阅读 231评论 0 0
  • 春天到了 小朋友们 穿上了美丽的花袄 来到花园里 开心地到处跑 春风像把小梳子 梳绿了柳树 梳青了禾苗 春雨像把小...
    柴子恒阅读 252评论 0 1