使用CSS使用复选框更改材料图标

Question

我有一些复选框，它们在跨度和范围内都有材料。我希望材料材料与已检查和未检查的材料不同。我尝试了一些，但不起作用。

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

这是我的复选框，默认情况下，它具有材料 print-disabled。我希望我的 check-box是 checked，将材料 - 元素作为 print。

我尝试了

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

解决方案是什么？预先感谢：）

Answer 1

这样吗？CSS自定义复选框

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>