1

I have a some check-boxes which have material-icons in the span along with it. I want the material-icons to be different of the checked and unchecked ones. I tried some with my own, but not working. 

    <input type="checkbox" id="main_assessment" name="main_assessment"/>
    <span class="label-text">
    <span style="font-size:1.2em;padding-right:10px;text-transform:none;"><strong>Main Assessment</strong></span>
    <span style="color:#8c8c8c;"><i class="material-icons">print_disabled</i></span>
    </span>

This is my checkbox, which has material-icons print-disabled by default. I want my check-box which are checked to have material-icons as print.

I tried as

    :checked + span + span + i .material-icons::before{
    content:"print";
    }

What is the solution? Thanks in advance:)

Bikram Nath
  • 483
  • 6
  • 15

1 Answers1

0

like this? CSS Custom Checkbox

body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

/* checkboxes */

label {
    cursor: pointer;
     display: inline-block;
     position: relative;
     padding-left: 25px; /* 10 px padding right + 15px input type*/
     margin-right: 10px; /* margin between inputs types */
 }
 
label:before {  
     content: "";
     width: 15px;
     height: 15px;
     position: absolute;  
     left: 0;
 }
 
input[type=checkbox] {  
     display: none;  
 }
 
.checkbox label:before {
  background: url('http://i3.photobucket.com/albums/e22/lilsq3/checkbox_small.png') left center no-repeat;
    margin-top: 2px;
 }
 
input[type=checkbox]:checked + label:before {  
     background: url('http://i36.photobucket.com/albums/e22/lilsq3/checkbox_selected_small.png') left center no-repeat;  
 } 
<div class="checkbox">  
    <input id="check1" type="checkbox" name="check" value="check1">  
    <label for="check1">Checkbox One</label>
    <br>
    <input id="check2" type="checkbox" name="check" value="check2">  
    <label for="check2">Checkbox Two</label>  
</div>
Caio de Paula Silva
  • 111
  • 5