locked
how to change color of my icon when checkbox checked RRS feed

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

    Friday, December 4, 2020 12:49 PM

Answers

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 4, 2020 2:57 PM

All replies

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 4, 2020 2:57 PM
  • User1991482975 posted

    that's work perfectly 

    thanks

    Saturday, December 5, 2020 12:30 PM