[selectors] Add selector for blank inputs

[fantasai]

https://twitter.com/thedamon/status/855440231197278209

Is anyone in CSS land working on detecting empty inputs? or expanding :empty to cover value for self-closing elements?

[Loirooriol]

Using placeholder=" " and :placeholder-shown seems to work, but probably too hacky and unreliable.

[FremyCompany]

Not supported in Edge. There is required + :invalid that works as a combo everywhere though.

[fantasai]

@FremyCompany That will also match elements that are not empty but whose contents are invalid. So it is not helpful here.

[FremyCompany]

@fantasai good point

[jonathantneal]

I wrote a script to simulate this effect by adding an empty-within attribute to elements that are an empty text control or contain one.

https://jonathantneal.github.io/empty-within/

I hope this can demonstrate the value in such a selector, as well how applicable it may already be.

One thing I have learned in this exercise is that I would not want this blank input selector to target regular elements. For instance, if :empty were merely extended to capture empty inputs, then :has(:empty) (or something like :empty-within) could end up capturing non-form elements, such as decorative markup that was unrelated to the intent of my styling. I hope this makes some sense.

[tomhodgins]

I have a number of JS plugins that add this sort of selection support for stying. Including this demo: https://codepen.io/tomhodgins/pen/oLVWJX

I would love the ability to select <input> and <select> when they have no value. It would be wonderful if [value=""] was live, but if that's not possible, just allowing you to select empty versus non-empty values would be a big help!

[css-meeting-bot]

The CSS Working Group just discussed decide on :blank, and agreed to the following:

• RESOLVED: Add :blank for input selectors

The full IRC log of that discussion

<dael> Topic: decide on :blank
<dael> github: https://github.com//issues/1967
<dael> fantasai: There's a realted issue to decide first.
<fantasai> https://github.com//issues/1283
<jensimmons> I definitely prefer west coast of North America. Let’s pick a major hub city for international flights — like Vancouver or LA. We also have a lot of office space available in San Fran, Mountain View…. lots of options.
<dael> fantasai: Adding a selector for blank input fields
<dael> fantasai: If we want to do that black is the best name. If we do that we can't use blank for meaning empty.
<dael> fantasai: Comments, thoughts?
<dael> fantasai: We can reserve the name and not resolve to add or decide we don't want to do this.
<dbaron> s/Singapore is easier to get to right now/I'd prefer Japan twice over Singapore or Malaysia. Between Singapore and Malaysia, Singapore is easier to get to right now due to competition in SFO-SIN flights./
<TabAtkins> Okay, LA is out too. It's got setups for *much larger* meetings, and *slightly smaller* meetings (16-18), but nothing in our sweet spot.
<dael> dauwhe: Also have blank selector in pages
<bkardell_> :blank seems right for inputs to me
<Rossen_> s/ do that black is the best name/ do that blank is the best name/
<dael> fantasai: Yeah. That's a different scope so not a naming conflict
<dael> Rossen_: Opinions?
<fantasai> a) Decide to add :blank for input selectors
<dael> fantasai: Options [in IRC]
<fantasai> b) Decide to reserve :blank but not resolve to add yet
<fantasai> c) Decide we either don't care about blank inputs or don't want :blank for them regardless
<dael> fantasai: We should decide on a/b/c and then go back
<dael> Rossen_: This was 1283, right?
<dael> fantasai: Yeah
<dael> github: https://github.com//issues/1283
<dael> Rossen_: I see one opinion
<dael> fremy: I just looked and I like using a function on empty and specify if whitepsace is a parameter.
<dael> fantasai: That's issue 1967
<dael> dbaron: One proposal in the past is have an attribute selector like syntax that you can use with form control. A way to put form value into attribute selector syntax.
<dael> fantasai: Would it handle all the relevent use cases?
<bkardell_> i would think it would matter for input
<dael> dbaron: white space variations on empty string? OR does that not matter as much?
<dael> fantasai: Don't know. If we go with functional notation for empty we might want same here.
<dbaron> e.g., input[:value=""]
<dael> Rossen_: We can add 'ish' param ^-^
<chris> lol
<fremy> @Rossen_: +1 :)
<dael> Rossen_: Back to original options, can we narrow those down?
<dael> fantasai: I suggest a or b which means not use blank in 1967
<bkardell_> are we not considering @dbaron's idea
<dael> Rossen_: 1283 is we're supposed to use blank. That's option a
<dael> fantasai: I think for the question of blank inputs we can go with dbaron option or we can decide to reserve blank or we do both.
<bkardell_> can we say the value is trim'ed in dbaron's?
<dael> fantasai: Is blank a thing we would want to apply to inputs or empty elements that might contain white space
<dael> Rossen_: Opinions?
<dael> nigel: I like the input value idea, it's nicely extensible. If you need a keyword is an interesting question. You can also define a regex and have a valid/invalid keyword.
<fantasai> nigel, see Chapter 12 in https://www.w3.org/TR/selectors-4/
<dael> nigel: For input controls, nonvalid and invalid are the obvious catagories as a min. If you need a test for particular strings is a bit much
<dael> fantasai: Have required and optional, but we don't have hey is this input empty or not.
<bkardell_> nigel I think part of the question is still whether " " is the same as "" or null
<dael> tantek: I don't hear strong opposition to blank [missed]
<dael> fantasai: Emty wouldn't work on inputs because they'r empty
<dael> tantek: I think I lean toward a
<dbaron> s/tantek/gregwhitworth/ (twice)
<dael> nigel: Blank being different from some whitespace can be considered to tbe the same as opposed to empty which can be literally the null string
<dael> gregwhitworth: I don't disagree but I feel we're in a weird world with empty and invalid. Invalid would hit the regex pattern I think.
<dael> gregwhitworth: Trying to solve a lot of same problems with 3 classes. THat's prob why fremy wanted to lean toward functional. I think we can bikeshed name later but I don't know anything better.
<bkardell_> dbaron's thing sidesteps the naming issue if we can say the value is trimmed?
<fremy> @gregwhitworth: I was thinking about `:empty(value)` for instance
<dael> Rossen_: I agree with gregwhitworth. I would prefer to make mroe progress so we can go back to 1967.
<dael> Rossen_: Objections to "Decide to add :blank for input selectors"
<dael> RESOLVED: Add :blank for input selectors
<dael> Rossen_: nigel to gregwhitworth 's point we might come back and bikeshed

[AmeliaBR]

I'll be glad to have this functionality out there, but there will need to be an education effort to counter existing educational content describing the very different :blank proposal that is currently in the spec.

[jonathantneal]

@AmeliaBR, thanks for clarifying that. I’m in the process of writing a polyfill for :blank, and so I was sure to link to the draft version of the Selectors Level 4 specification. I normally link to the latest published version, but I will be more careful in the future.

https://www.npmjs.com/package/css-blank-pseudo