Add a variant to style :hover on a form control without the associated label triggering it

[seb-jean]

Per the HTML spec, a labeled control matches :hover whenever its <label> is hovered. This means hover: utilities applied to an <input> fire when the user hovers the label, not just the control itself.

For most designs this is desirable. But for controls with a distinct hover treatment (a border that darkens, a radio indicator that fills in) it produces a visual response far from the pointer, which reads as a glitch.

Proposal

A first-party variant (hover-self:, or whichever name fits the existing conventions) that applies only when the control itself is hovered.

<input class="border-zinc-950/10 hover-self:border-zinc-950/40">

One possible implementation, which works today as a custom variant:

@custom-variant hover-self (&:hover:where(:not(body:has(label:hover) *)));

Requires :has(). An alternative built on the parent-witness behaviour avoids that dependency but needs a parent element.

Reproduction

https://play.tailwindcss.com/vsCu8Ayu1s

Hover the label of each field. Both inputs are styled identically; only the second ignores the label.

[vedant476]

The core issue makes sense. The visual mismatch can be especially noticeable for inputs where the hover state is meant to communicate the exact pointer target.

One thing I'd be careful about with the proposed custom variant is the selector:

body:has(label:hover) * would match every descendant whenever any label on the page is hovered, so it could suppress hover-self: on unrelated controls too.

A first-party variant would still be useful, though. The main challenge seems to be distinguishing “the input is hovered because its label is hovered” from “the input itself is hovered”, since both ultimately resolve to :hover in CSS.