Skip to content
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-pseudo] [css-selectors] Clarification: do ::placeholder/:placeholder-shown apply to <select>s’ “placeholder label option”? #2517

Closed
tigt opened this issue Apr 8, 2018 · 5 comments
Labels

Comments

@tigt
Copy link

tigt commented Apr 8, 2018

The ::placeholder and :placeholder-shown selectors apply to elements with explicit placeholder attributes, like <input> and <textarea>. Should they also match <select> elements with a “placeholder label option”?

HTML Standard / Form Elements / §4.10.7 The select element / #placeholder-label-option:

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

My intuition suggests that the following would be true:

  • :placeholder-shown matches a <select> where its currently selected <option> is a placeholder label option
  • ::placeholder matches said <option> (or a pseudo-element inside it)

It’s sort of possible to emulate this today:

/* Rough, not-100% alternative to select:placeholder-shown */
select:required:invalid {
  /* … */
}

/* Fairly close but v. ugly equivalent to select::placeholder */
select:required:not([multiple]):matches(:not([size]), [size="1"]) > 
  option:first-child:matches([value=""], :empty:not([value]) {
    /* … */
}

But the constraints outlined in the HTML spec aren’t perfectly expressible with other selectors*, so having the placeholder-related selectors apply to this case would be useful.

* In no particular order, and I’m sure not a complete list:

  • Weird values in the size attribute (zero, negative numbers, floats, non-numeric characters) can still cause the display size to become 1

  • A :required <select> can be :invalid for other reasons, such as setCustomValidity()

  • There may be other elements in front of the first direct-child <option>, like <script> and <template>

@tabatkins tabatkins added the css-pseudo-4 Current Work label May 9, 2018
@fantasai
Copy link
Collaborator

This makes sense to me. Agenda+ to confirm with the WG.

@fantasai fantasai added the selectors-4 Current Work label Dec 28, 2018
@css-meeting-bot
Copy link
Member

css-meeting-bot commented Jan 16, 2019

The CSS Working Group just discussed Clarification: do ::placeholder/:placeholder-shown apply to <select>s' "placeholder label option"?, and agreed to the following:

  • RESOLVED: Accept and add the :placeholder-select pseudo class and add a note for ::placeholder that we're interested in working on it
The full IRC log of that discussion <dael> Topic: Clarification: do ::placeholder/:placeholder-shown apply to <select>s' "placeholder label option"?
<astearns> s/[missed]/preffed/
<dael> github: https://github.com//issues/2517
<dael> Rossen_: Opened a while ago, added to agenda after a pass through issues.
<dael> fantasai: In case of s aselect the placeholder text is an element rather than an attribute
<dael> fantasai: Question is should ::placeholder match that so text inside can be styled? A little weird because not generating a new element, but it serves the same function
<dael> TabAtkins: Understand the use case and the complaints in the original post about how difficult this is to match this with a selector. I get the use case. A little concerns about compat, I'm betting :placeholder-shown is mostly on inputs.
<dael> TabAtkins: ::placeholder matching is complicated because inheritence, but we semi have that already
<dael> dbaron: Compat question is if people write input:placeholder-shown or :placeholder-shown
<dael> fantasai: And if they want the styling applied to those kinds of selects
<dael> florian: As for the pseudo element it's fuzzy b/c select is a replaced element so you can say actual isn't rendered and it is a psuedo. If that make sesne with appearance: none is an interesting question
<dael> TabAtkins: Don't want to get to idea select is entirely replaced. Doing some level of styling is useful
<dael> dbaron: One point of having web components is we can do something like that
<dael> TabAtkins: It would be be most optimal but we could come up with par. psuedo class and pseudo element
<dael> TabAtkins: Maybe we can jsut do pseudo class for now since it applies on the select?
<dael> fantasai: Prob solve the issue easiest because :placeholder-shown makes the placeholder the first child and you can style it
<dael> TabAtkins: True
<dael> TabAtkins: While I theoretical other language select would have more complex, in HTML it's the first child. Don't need an extra selector. Let's go with that
<dael> florian: Does styling of children of selection work?
<dael> TabAtkins: Don't remember, but I want to allow it
<dael> florian: We can start with that and see
<dael> Rossen_: Hearing yea for the pseudo class and wait on pseudo? Is that the proposal?
<dael> TabAtkins: I like that the best
<dael> Rossen_: Additional points?
<dael> fantasai: I can add a note in spec for ::placeholder that we're interested in doing this and looking for feedback
<dael> Rossen_: Prop: Accept and add the :placeholder-select pseudo class and add a note for ::placeholder that we're interested in working on it
<dael> Rossen_: Objections?
<dael> RESOLVED: Accept and add the :placeholder-select pseudo class and add a note for ::placeholder that we're interested in working on it
<dael> florian: I tested and if you try and style an option in a select it doesn't do anything
<dael> Rossen_: Okay
<dael> Rossen_: Where did you test? I think we support some of this in Edge
<dael> florian: FF and Chrome. Tried to style color
<dael> Rossen_: Interesting. Okay
<dael> Rossen_: We'll add the note and continue
<florian> same thing in safari
<dael> TabAtkins: florian did you jsut look or open it? When I open it in chrome options are styled
<dael> TabAtkins: I'm red color and bold stuff and non-selected are both. Selected is bold.
<TabAtkins> http://software.hixie.ch/utilities/js/live-dom-viewer/saved/6514
<TabAtkins> on chromeos
<dael> florian: Not here. Maybe OS dependent. It's a native appearance control
<dael> florian: Let's take it offline
<dael> Rossen_: Same works in Edge

See official minutes

fantasai added a commit that referenced this issue Jan 22, 2019
… ::placeholder apply to certain option elements. #2517
fantasai added a commit that referenced this issue Jan 22, 2019
@frivoal frivoal added the HTML Requires coordination with HTML people label Feb 25, 2019
fantasai added a commit that referenced this issue Dec 29, 2022
@fantasai fantasai reopened this Dec 29, 2022
@fantasai
Copy link
Collaborator

It seems that the placeholder label option concept isn't quite the same as placeholder text, it's mainly used for required input validation.

@tabatkins and I suggest undoing the previous resolution and relying on :blank to select <select>; now that we have :blank it should be able to do this job, and it is more widely applied than the unfortunately named “placeholder label option” concept.

Proposed Resolution: Undo previous resolution. Adopt :blank for this use case.

jakearchibald pushed a commit to jakearchibald/csswg-drafts that referenced this issue Jan 16, 2023
@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed Clarification: do ::placeholder/:placeholder-shown apply to <select>s’ “placeholder label option”?, and agreed to the following:

  • RESOLVED: Revert previous resolution
  • RESOLVED: Revert previous resolution; accept :blank works for this use case
The full IRC log of that discussion <emeyer> Topic: Clarification: do ::placeholder/:placeholder-shown apply to <select>s’ “placeholder label option”?
<emeyer> github: https://github.com//issues/2517
<emeyer> fantasai: The placeholder-shown example is about validation and it’s not really a placeholder option, it’s just a validation thing
<emeyer> …Tab and I propose to undo previous and have :blank match the default option in a dropdown
<emeyer> s/undo previous and/undo previous resolution and/
<emeyer> TabAtkins: placeholder pseudo doesn’t explicitly refer to validation
<emeyer> …any time your input is empty, it will match ::placeholder
<emeyer> …I agree with Elika, we can revert about adding ::placeholder-select and lean on ::blank for use cases
<fantasai> s/::blank/:blank/
<emeyer> …This will get us where we want without binding us to this weird solution
<fantasai> s/::placeholder-select/placeholder label option to matching placeholder pseudos/
<emeyer> Rossen_: Any objections?
<emeyer> (silence)
<emeyer> RESOLVED: Revert previous resolution
<emeyer> RESOLVED: Revert previous resolution; accept :blank works for this use case

@tabatkins
Copy link
Member

Closing as WONTFIX per resolution, since we accept that :blank should acceptably handle the use-case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants