how to change color of my icon when checkbox checked

Question

User1991482975 posted

Hi,

i have done this code and when i check i can change the color font of my label but i cannot chagne the color font of my icon fa.. why?

css

/* Checkbox Advertising START  */
.checkbox-alias {
    background-color: white;
    display: inline-block;
    width: 150px;
    height: 150px;
    z-index: 1;
    ;
    transition: all 250ms ease-out;
    cursor: pointer;
    color: #494947;
    font-weight: bolder;
    border: 2px solid #cbcbcb;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -moz-box-shadow: 2px 2px 2px 2px #cbcbcb;
    -webkit-box-shadow: 2px 2px 2px 2px #cbcbcb;
    box-shadow: 2px 2px 2px 2px #cbcbcb;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.invisible-checkboxes input[type=checkbox] {
    display: none;
}
    .invisible-checkboxes input[type=checkbox]:checked + .checkbox-alias {
        background-color: #e5e6eb;
        border: 1px solid #e5e6eb;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border-radius: 7px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -moz-box-shadow: inset 0 0 10px #cbcbcb;
        -webkit-box-shadow: inset 0 0 10px #cbcbcb;
        box-shadow: inset 0 0 10px #cbcbcb;
        color: #494947;
    }

    .invisible-checkboxes input[type=checkbox]:checked .checkbox-alias .checkincon {
        color: #494947;
    }

.checkbox-alias {
    text-align: center;
    vertical-align: middle;
    color: #808080;
}

    .checkbox-alias .checkincon {
        font-weight: 400;
        font-size: 25px;
        background-color: #cbcbcb;
        padding: 3px;
        margin: 3px;
        border: 8px solid #cbcbcb;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        color:#808080;
    }
/*! Checkbox Advertising END  */

html

 <div class="row _salon-ld invisible-checkboxes">

                                <div class="col-lg-2 col-md-3 col-sm-5 col-xs-12 padding-bottom15">
                                    <input data-val="true" data-val-required="@ViewRes.ValidationStrings.Required.Replace("{0}", ViewRes.NamesPartner.PartnerAdvertiseActiveName)" id="PartnerAdvertiseActiveName" name="PartnerAdvertiseActiveName" type="checkbox" value="true" @(Model.PartnerAdvertiseActiveName ? "checked=\"checked\"" : "")>
                                    <label class="checkbox-alias" for="PartnerAdvertiseActiveName"><i class="fa fa-info-circle checkincon margin-top15"></i><br /> @ViewRes.NamesPartner.PartnerAdvertiseActiveName</label>
                                    <input name="PartnerAdvertiseActiveName" type="hidden" value="@Model.PartnerAdvertiseActiveName.ToString()">
                                    <span class="field-validation-valid" data-valmsg-for="PartnerAdvertiseActiveName" data-valmsg-replace="true"></span>
                                </div>
</div>

i would love to make the fa icon to grey color when checked : color: #494947;

how to do?

Answer 1

User2103319870 posted

but i cannot chagne the color font of my icon fa

Try with below css

input[type="checkbox"]:checked  ~ .checkbox-alias .fa {  
color: #494947;
}

Answer 2

User1991482975 posted

that's work perfectly 

thanks