Re: [css-selectors] :focus and :checked

+100

I would really, really love it if label elements matched all the
form-related pseudo-classes from their associated input.  Not only
:checked, but also :invalid and :required and so on.

Beyond the freedom from awkward DOM structures, it would provide another
incentive for developers to actually use properly associated <label>
elements, and also proper HTML form validation attributes, all of which go
a long ways to improving form accessibility.

~Amelia BR



On 2 August 2016 at 13:31, Brian Kardell <bkardell@gmail.com> wrote:

> People can do a lot with the 'checkbox hack' and I see designers all the
> time bend over backwards trying to manage this so that labels are in
> sibling relationships, but this is occasionally impractical or even
> impossible.  In other words, given
>
>
> <div>
>    <label for="x">Blah</label>
> </div>
> <input type="checkbox" id="x">
>
> You're screwed. Labels proxy their clicks to set focus on their input or
> check a checkbox or select a radio button, but there's no bi-directional
> relationship. I know that this has come up in the past, but in the past it
> looks like there were mostly concerns about things like :hover[1] because
> of perf, or ideas that other things like subjects/reference combinators
> would solve the problem another way.  The latter doesn't seem like it is
> gonna happen soon and the former is only part of the problem - maybe the
> least useful one.
>
> :focus and :checked are certainly more 'rare' events and it feels like at
> least maybe those we could afford to support-bidirectionally.  If
> developers were able to style a label when the input were :checked or
> :focused that seems like it would be a small, but powerful win that would
> open lots of new possible doors.
>
> Can we do this?
>
>
> [1]
> https://lists.w3.org/Archives/Public/public-whatwg-archive/2014Nov/0076.html
> --
> Brian Kardell :: @briankardell
>