Is there a way to make the checkbox "light up" when hovering over it while it is in the "not checked" state?

[fretje]

Apparently, there is a way to make a checkbox "invert colors" when hovering over it, but this works only when the checkbox is in the "checked" state:

                <div class="pretty p-icon p-fill p-bigger p-has-focus p-has-hover">
                    <input type="checkbox">
                    <div class="state p-primary">
                        <i class="icon fa fa-check"></i>
                        <label>Remember Me</label>
                    </div>
                    <div class="state p-primary-o p-is-hover">
                        <i class="icon fa fa-check"></i>
                        <label>Remember Me</label>
                    </div>
                </div>

I would like to achieve something similar, but also when the checkbox is in the "unchecked" state.

Also: it would be nice if this would be possible without having to repeat the icon and label.

[chrisblessing]

Here's a simple selector you can use to adjust the "check" mark indicator on hover:

.pretty:hover .state label::after {
    background-color: #eee !important;
}

You can probably already see how you could do this for the text label and the box outline (::before) as well. Cheers.