【问题标题】:changing material icon in a span with checkbox using css使用 CSS 更改带有复选框的跨度中的材质图标
【发布时间】:2019-07-12 22:05:36
【问题描述】:

我有一些复选框,它们的跨度中有材料图标。我希望材质图标与选中和未选中的不同。我自己尝试了一些,但没有用。

    <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-boxchecked 的材质图标为print

我试过了

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

解决办法是什么?在此先感谢:)

【问题讨论】:

    标签: html css google-material-icons


    【解决方案1】:

    喜欢这样吗? 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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-12-23
      • 2013-04-29
      • 2019-09-26
      • 1970-01-01
      • 2022-01-12
      • 1970-01-01
      • 2019-02-12
      • 2020-11-25
      相关资源
      最近更新 更多