This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 15413 - <label> :checked state should reflect the input's one
Summary: <label> :checked state should reflect the input's one
Status: NEW
Alias: None
Product: CSS
Classification: Unclassified
Component: Selectors (show other bugs)
Version: unspecified
Hardware: PC Windows NT
: P2 normal
Target Milestone: ---
Assignee: fantasai
QA Contact: This bug has no owner yet - up for the taking
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-01-04 03:31 UTC by Giorgio
Modified: 2012-02-02 01:39 UTC (History)
8 users (show)

See Also:


Attachments

Description Giorgio 2012-01-04 03:31:08 UTC
hello, I think people expect to see working an expression like this:

<style>
label:checked{background:lime;}
</style>

<label for="asd">Check me</label>
...
<input type="checkbox" name="test" id="asd">

hope this helps
Comment 1 Marat Tanalin | tanalin.com 2012-01-05 22:37:21 UTC
Indeed, it would be nice.

Currently we are forced to place LABEL exactly after INPUT and use adjacent-sibling combinator to style LABEL:

	INPUT + LABEL {...}

Someone may say that it's not about HTML, but about CSS. However, same way as we have input.checked JS property, we could have label.checked JS-property. CSS could then just add corresponding selector to reflect this.
Comment 2 Tab Atkins Jr. 2012-01-05 23:04:15 UTC
This can be addressed with some new additions in Selectors 4, without any necessary change to HTML.

If you have <label for>, it can be done with a selector like "label! /for/ :checked".  This uses the reference combinator ("/for/" <http://dev.w3.org/csswg/selectors4/#idref-combinators>) to link the label to its input, and uses the subject indicator ("!" <http://dev.w3.org/csswg/selectors4/#subject>) to indicate you're trying to select the label, not the input.

If you have a plain <label> that contains its input, you can use "label! :checked", again using the subject indicator to select the label instead of the input.
Comment 3 Ian 'Hixie' Hickson 2012-02-02 01:39:19 UTC
This is a CSS/selectors issue.