How many states of radio button are predefined in browser?

I faced a task to develop custom radio button. To avoid styling issues I want to know all possible predefined states (like checked, active and else) in order to make CSS rules for them being sure that I am not going have some unexpected styling.

What are these states and their combinations?

In W3C Selectors Level 3 document there are following states pseudo-classes which can be applied to radio element:

• :checked
• :enabled
• :disabled

Keeping in mind that radio element can be not checked, it is necessary to mention that there is the unchecked state. These states come in pairs and one state in each pair is always present. This way we get 4 possible states for now (they can be found on mindmap below).

There do exist dynamic pseudo-classes which can be applied to html radio element:

• :hover
• :active
• :focus

They can be used in any combination or not used at all. There are 8 possible combinations of them. Combining this with 4 enabled-disabled, checked-unchecked pairs we get 32 possible stated which can be found on the following mindmap (zoom to see it full size): Every pass that includes at least two nodes counting from the checked-unchecked node is a state, for example:

• checked-disabled,
• checked-enabled-focus,
• unchecked-enabled-hover-active.

Near every enabled path, there is a picture of radio button state as it is implemented in Chrome Browser on MacOS Sierra now. There is only one picture for each disabled path — they are all the same for other disabled states. There are 10 pictures in total representing each state. Numbers are used for convenience.