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