Some notes:

1) If you're wrapping the label around the input, you do not actually need for/id. That's for when they're siblings.

2) you'd probably be better off not slopping classes on everything for nothing, since you're using sibling combinators in the first place.

3) in which case rather than wasting a span, you would/could probably use the label where you have the span and skip having the extra container altogether!

4) If one wanted to auto-apply this across the page, it might be even easier to simply skip wasting time on classes altogether, and instead using attribute selectors to hook the appropriate elements.

5) remember, PX is inaccessible sucker-bait that doesn't scale with text properly. It's called EM, use 'em.

I might make my own article showing said approach -- and backlink to yours to give credit where it's due.

That said, isn't it amazing the number of things we can do with CSS3 to not only make pages look better, but also tell JavaScript to take a hike?

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store