Move the input outside the label and make the clickable area of the label half the size of the switch. That way, you can't click the side that's pressed in. Then it'll be "realistic" ๐
Yes, others have suggested this also, however, I think that this is problematic in terms of accessibility since the user expects the whole switch to be clickable.
I think that would be the least of the concerns in making this accessible ๐
However, If you want to take it a step further though, divs aren't allowed as children of label ๐
Switch them to span and use display to style them up.
Looks great! One tiny thing I'd change ๐ค
Move the
inputoutside the label and make the clickable area of the label half the size of the switch. That way, you can't click the side that's pressed in. Then it'll be "realistic" ๐Yes, others have suggested this also, however, I think that this is problematic in terms of accessibility since the user expects the whole switch to be clickable.
I think that would be the least of the concerns in making this accessible ๐
However, If you want to take it a step further though, divs aren't allowed as children of
label๐Switch them to
spanand usedisplayto style them up.Yes, I guess you're right... ๐
And that's a good point regarding the divs ๐