Repository navigation
[css-pseudo] [css-selectors] Clarification: do ::placeholder/:placeholder-shown apply to <select>s’ “placeholder label option”? #2517
Description
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
selectelement has arequiredattribute specified, does not have amultipleattribute specified, and has a display size of 1; and if the value of the firstoptionelement in theselectelement's list of options (if any) is the empty string, and thatoptionelement's parent node is theselectelement (and not anoptgroupelement), then that option is theselectelement's placeholder label option.
My intuition suggests that the following would be true:
:placeholder-shownmatches a<select>where its currently selected<option>is a placeholder label option::placeholdermatches 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
sizeattribute (zero, negative numbers, floats, non-numeric characters) can still cause the display size to become 1 -
A
:required<select>can be:invalidfor other reasons, such assetCustomValidity() -
There may be other elements in front of the first direct-child
<option>, like<script>and<template>
Activity
fantasai commentedon Dec 28, 2018
This makes sense to me. Agenda+ to confirm with the WG.
css-meeting-bot commentedon 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 itThe 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
[css-pseudo-4] Cross-link to :placeholder-shown, note request to make…
[selectors-4] Make :placeholder-shown clearly apply also when placeho…
[selectors-4][css-pseudo-4] Revert placeholder option example, since …
fantasai commentedon Dec 29, 2022
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
:blankto select<select>; now that we have:blankit 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
:blankfor this use case.[selectors-4][css-pseudo-4] Revert placeholder option example, since …
css-meeting-bot commentedon Jan 25, 2023
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 resolutionRESOLVED: Revert previous resolution; accept :blank works for this use caseThe 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 commentedon Jan 25, 2023
Closing as WONTFIX per resolution, since we accept that
:blankshould acceptably handle the use-case.