zoukankan      html  css  js  c++  java
  • css美化checkbox的样式

    使用iCheck插件可以改变checkbox、radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的click事件,所以费了些时间写了一个单纯css可以控制样式的解决方法,以checkbox为例:

    input[type="checkbox"]{
        position: relative;
        width: 13px;
        height: 13px;
        background: #fff;
        border: 1px solid #dcdcdc;
        border-radius: 1px;
        -webkit-appearance: none;
        border-width: 0 ;
    }
    
    input[type="checkbox"]:focus {
        outline: 0;
        border-color: #428bca;
    }
    
    input[type="checkbox"]:checked {
        background: #fff;
        border-color: #0099ff;
    }
    
    input[type="checkbox"]:checked::after {
        content: url(checkmark.png);
        display: block;
        position: absolute;
        top: -6px;
        left: -5px;
    }

    通过改变checkmark.png来定义自己的样式

    jquery判断checked的三种方法:
    .attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
    .prop('checked'): //16+:true/false
    .is(':checked'):    //所有版本:true/false//别忘记冒号哦
    jquery赋值checked的几种写法:
    所有的jquery版本都可以这样赋值:
    // $("#cb1").attr("checked","checked");
    // $("#cb1").attr("checked",true);
    jquery1.6+:prop的4种赋值:
    // $("#cb1″).prop("checked",true);//很简单就不说了哦
    // $("#cb1″).prop({checked:true}); //map键值对
    // $("#cb1″).prop("checked",function(){
    return true;//函数返回true或false
    });
    //记得还有这种哦:$("#cb1″).prop("checked","checked");

  • 相关阅读:
    EBS_FORM_开发:关于离开record验证
    EBS_FORM_开发:关于WHEN-VALIDATE-ITEM上面commit
    EBS_FORM_开发:关于LOCK-ON
    EBS_FORM_开发:实现form record ctrl+F6复制
    EBS_FORM_开发:关于切换不同BLOCK的时候弹出需要保存的窗口
    EBS_FORM_开发:FRM-40150的解决思路
    工作记录
    02_mysql表的操作
    Mysql_字符集_排序规则
    JAVA_IO
  • 原文地址:https://www.cnblogs.com/moumou0213/p/6278784.html
Copyright © 2011-2022 走看看