New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-selectors] Make <label> elements reflect CSS pseudoclasses on associated form element #397

Open
gregwhitworth opened this Issue Aug 10, 2016 · 6 comments

Comments

Projects
None yet
5 participants
@gregwhitworth
Contributor

gregwhitworth commented Aug 10, 2016

This discussion was taking place in the WHATWG, moving this over to the CSSWG repo so all CSS members see it and are able to engage. For reference, here is the issue for more context: whatwg/html#1632 (comment)

@gregwhitworth

This comment has been minimized.

Contributor

gregwhitworth commented Aug 10, 2016

@frivoal To answer your question, it is still in Edge but off by default behind a flag as no other browser currently implements it this way.

@bkardell

This comment has been minimized.

bkardell commented Aug 11, 2016

@gregwhitworth do all of them work in edge with the flag? :checked etc?

@gregwhitworth

This comment has been minimized.

Contributor

gregwhitworth commented Mar 2, 2017

@bkardell No it doesn't propagate those, I've updated the testcase to include those http://jsbin.com/munatiyega/edit?html,css,output

@fantasai

This comment has been minimized.

Contributor

fantasai commented Jan 1, 2018

Related discussion on www-style. (This issue keeps coming up.)

@therealglazou

This comment has been minimized.

Contributor

therealglazou commented Jan 30, 2018

This is a 18 years old discussion in the CSS WG (see Reference Combinator in https://lists.w3.org/Archives/Member/w3c-css-wg/2000JulSep/0214.html and we already discussed it back in '97...) : I think we should not solve the individual <label> case directly but have a generic mechanism for ID/IDREF references. There are many other ID/IDREF cases in dozens of XML dialects that could benefit from such a generic mechanism, including in EPUB.

@tigt

This comment has been minimized.

tigt commented Apr 8, 2018

@therealglazou That would be nice, but <label>s can also be associated with descendant form elements without ID/IDREFs, so this seems to have a slightly larger scope.

As an author, this is a somewhat silly example of what I would love to use this functionality for:

<label>2 + 2 = ?
  <svg><use href="#correct" /><use href="#incorrect" /></svg>
  <input name="answer" pattern="4" required />
</label>
use {
  display: none;
}

label:valid > [href="#correct"],
label:invalid > [href="#incorrect"] {
  display: inline;
}

It’s sort of possible today to do this by placing the elements after the form element in question and using something like input:valid ~ foo, but that can be impossible with certain markup output — it’s common to wrap <select> inside a <span> for styling purposes, for example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment