Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to apply image in the checkbox using CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 311
    Comment on it

    Hello Readers, Here is simple line of code that will be useful for applying different color in checked or unchecked state or User can apply different icons to it, This will be only possible using HTML and CSS, User can see below how these line of code working and giving new look or touch to it. This will be helpful for decorating the textbox according to the user's desire.

    HTML Source Code:

     <div class="input-group">
            <?php echo $this->Form->input("User.Company", array("type" => "checkbox",'id'=>'html', "class" => "cust-checkbox", "div" => false, "label" => false, "tabindex" => ++$tabIndex, "required" => true, 'autofocus' => true, 'aria-describedby' => 'basic-addon1')); ?>
             <label class="cust-checkboxLabel" for="html"><span>Curated</span></label>
        </div>
        <label for="inputHelp" class="sr-only">Help</label>
        <div class="input-group">
            <?php echo $this->Form->input("User.Company", array("type" => "checkbox", 'id'=>'html1',"class" => "cust-checkbox", "div" => false, "label" => false, "tabindex" => ++$tabIndex, "required" => true, 'autofocus' => true, 'aria-describedby' => 'basic-addon1')); ?>
             <label class="cust-checkboxLabel" for="html1"><span>News</span></label>
        </div>
    

     

    CSS Source Code:

    .cust-checkbox:checked + .cust-checkboxLabel::before  {
        /*background-image: url(img/)*/
        border: 2px solid #5e605f;
        border-radius: 0;
        color: #000;
        content:"\e013";
        font-family: "Glyphicons Halflings";
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        line-height: 26px;
        text-decoration: inherit;
    }
    .cust-checkbox + .cust-checkboxLabel::before {
        background: transparent none repeat scroll 0 0;
        border: 2px solid #5e605f;
        content: "a";
        display: inline-block;
        height: 30px;
        margin-right: 0px;
        text-align: center;
        vertical-align: -1px;
        width: 30px;
        color: #fff;
    }
    .cust-checkbox, .cust-checkboxLabel {
        /*cursor: pointer;*/
        display: inline-block;
        font-weight: normal;
        margin: 0;
        vertical-align: middle;
    }
    .cust-checkbox {
        opacity: 0;
        position: absolute;
    }
    .cust-checkbox[disabled] + .cust-checkboxLabel:before{background: #ccc;border-color: #aeaeae;cursor: no-drop;}
    .cust-checkbox[disabled] + .cust-checkboxLabel{color:  #aeaeae;cursor: no-drop;}
    .cust-checkboxLabel{position: relative;}

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: