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

[selectors] Add selector for blank inputs #1283

Closed
fantasai opened this issue Apr 23, 2017 · 9 comments
Closed

[selectors] Add selector for blank inputs #1283

fantasai opened this issue Apr 23, 2017 · 9 comments

Comments

@fantasai
Copy link
Collaborator

@fantasai fantasai commented Apr 23, 2017

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
Copy link
Collaborator

@Loirooriol Loirooriol commented Apr 23, 2017

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

@FremyCompany
Copy link
Contributor

@FremyCompany FremyCompany commented Apr 24, 2017

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

@fantasai
Copy link
Collaborator Author

@fantasai fantasai commented Jan 31, 2018

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

@FremyCompany
Copy link
Contributor

@FremyCompany FremyCompany commented Feb 7, 2018

@fantasai good point

@jonathantneal
Copy link
Contributor

@jonathantneal jonathantneal commented Feb 19, 2018

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
Copy link

@tomhodgins tomhodgins commented Feb 19, 2018

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
Copy link
Member

@css-meeting-bot css-meeting-bot commented Sep 26, 2018

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
Copy link
Contributor

@AmeliaBR AmeliaBR commented Sep 26, 2018

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
Copy link
Contributor

@jonathantneal jonathantneal commented Nov 17, 2018

@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

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

Successfully merging a pull request may close this issue.

None yet
7 participants
You can’t perform that action at this time.