Add a style for "Hover & Checked" state

[pomeh]

Hi,

For the moment there are 5 states for checkboxes and radio buttons: normal, hover, checked, disabled, disabled & checked. This is great but it doesn't handle the case when a checked checkbox/radio is hovered using the mouse or focused using the keyboard. Native radio buttons have this behavoir so it would be great to have it in iCheck too, it's better for usability and user experience (the user should know where the current keyboard/mouse focus is).

What do you think about it ?

Also, I've found that a "focus" class is added to the element when the user get the focus using the keyboard, but this class does not seems to be used in the CSS, is this normal ? Maybe it depends on the CSS theme we use.

[drgullin]

Note that iCheck also provides the active and focus classes.

Hover, focus and active classes are the synonyms of the original :hover, :focus and :active pseudo classes.

Hover is appended to the styler div when user hovers it, focus is appended when input gains native :focus, active is appended when div gets a native :active state.

So the iCheck has a full support of the keyboard and mouse events. It has also support for the :indeterminate state.

iCheck is built for making the checkboxes and radio buttons customization process dead simple. By now, it supports almost everything you may need.

Try to use a 2.x version, it's much better than the 1.x branch.

[drgullin]

Also note that most of the (out of the box) skins currently doesn't use all states, mostly only a hover, just because it's a most used state by the users.

[pomeh]

Ok I see your point. Actually, my problem was was: there is no ".checked.hover" style and I thought it could be useful to other people:

.icheckbox_minimal-aero {
    background-position: 0 0;
}
    .icheckbox_minimal-aero.hover {
        background-position: -20px 0;
    }
    .icheckbox_minimal-aero.checked {
        background-position: -40px 0;
    }
    .icheckbox_minimal-aero.disabled {
        background-position: -60px 0;
        cursor: default;
    }
    .icheckbox_minimal-aero.checked.disabled {
        background-position: -80px 0;
    }

While I've solved my problem using the following CSS, I thought it would be nice to have it natively in iCheck.

.icheckbox.focus, .iradio.focus,
.icheckbox.hover, .iradio.hover {
    outline: 1px solid rgba(82,168,236,0.8);
}

It add an outline when the mouse is over an element or when it has keyboard focus.

Since the workaround is quite simple, I understand if you don't want to integrate this natively, but this post may be useful for people in the future.

Regards