Style css is empty

Check if input is empty css

There is (currently) no CSS selector for detecting directly whether an input control has a nonempty value, so we need to do it indirectly, as described above.,Use attribute selector with blank value and apply properties input[value=»],The :empty selector refers only to child nodes, not input values. [value=»»] does work; but only for the initial state. This is because a node’s value attribute (that CSS sees), is not the same as the node’s value property (Changed by the user or DOM javascript, and submitted as form data).,The valid selector will do the trick.

See a demo of the limits of CSS plus the javascript solution at this jsBin page.

// ==UserScript== // @name _Dynamically style inputs based on whether they are blank. // @include http://YOUR_SERVER.COM/YOUR_PATH/* // @grant GM_addStyle // ==/UserScript== /*- The @grant directive is needed to work around a design change introduced in GM 1.0. It restores the sandbox. */ var inpsToMonitor = document.querySelectorAll ( "form[name='JustCSS'] input[name^='inp']" ); for (var J = inpsToMonitor.length - 1; J >= 0; --J) < inpsToMonitor[J].addEventListener ("change", adjustStyling, false); inpsToMonitor[J].addEventListener ("keyup", adjustStyling, false); inpsToMonitor[J].addEventListener ("focus", adjustStyling, false); inpsToMonitor[J].addEventListener ("blur", adjustStyling, false); inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false); //-- Initial update. note that IE support is NOT needed. var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("change", false, true); inpsToMonitor[J].dispatchEvent (evt); >function adjustStyling (zEvent) < var inpVal = zEvent.target.value; if (inpVal && inpVal.replace (/^\s+|\s+$/g, "") ) zEvent.target.style.background = "lime"; else zEvent.target.style.background = "inherit"; >

Answer by Hakeem Phillips

/* If input is not empty */ input:not(:placeholder-shown) < /* You need to add a placeholder to your fields. For example: */ border-color: green; > /* If input is empty */ input:placeholder-shown

Answer by Kori Benitez

Today, if you’re relying on the :invalid pseudo-class to visualize validation state, your users’ form editing experience starts with a bunch of red borders – not great! Unfortunately, the :empty pseudo-class isn’t a great help either, because it targets elements without children. What could you use instead?,How could you show that the field element is invalid after someone interacted with the field? CSS offers the :invalid pseudo-class for that use case (at least theoretically).,Today a Twitter thread about forms by Arslan Khalid passed my timeline. The thread included a smart CSS rule that wasn’t on my radar so far. It targets invalid but not empty (!) input elements. So, why is that cool? Let’s take a step back. Also, Koen Cornelis brought up the point that placeholders usually have more disadvantages than advantages. If you don’t want to define placeholder values, you can still go with a space to keep the same CSS functionality.

You could have an email field like the following.

How could you show that the field element is invalid after someone interacted with the field? CSS offers the :invalid pseudo-class for that use case (at least theoretically).

While not being the perfect solution either, Arslan’s proposed CSS rule is better than purely relying on :invalid . It uses :invalid in combination with :not(:placeholder-shown) . This way, elements only get marked as invalid when the placeholder is not shown (meaning that they’re not empty anymore).

input:not(:placeholder-shown):invalid

Edited: Amy Kapers pointed out that it would be great to combine the selector with :focus to not any validation state while someone is still typing. I agree, that’s a great idea. Thanks, Amy!

input:not(:placeholder-shown):not(:focus):invalid

Also, Koen Cornelis brought up the point that placeholders usually have more disadvantages than advantages. If you don’t want to define placeholder values, you can still go with a space to keep the same CSS functionality.

Answer by Zaylee Gallegos

Although :placeholder-shown is specifically made to target if an element is displaying the placeholder or not. We can essentially use it to check if the input is empty or not (of course, assuming, all your input has a placeholder). So maybe your next question, can’t we use CSS empty ? Well, let’s check ?‍?,Okay, so our only way of checking if an input is empty or not is using :placeholder-shown. But what happens if our input element doesn’t have a placeholder. Well here’s a clever way! Pass in an empty string, » «.,How to check input emptiness without a placeholder. placeholder-shown vs :emptyHow to check input emptiness without a placeholder?

Answer by Mario Sutton

The CSS :empty pseudo-class selects any element that does not contain children for a given selector.,You’d think it would be! But if we try to apply :empty to an and hope to make it red to show the user it needs to be completed, that input will always be red.,Here the :empty pseudo-selector helps us display a direction to the user in order to load a joke into the same field.,An element with nothing between its tags is empty.

The CSS :empty pseudo-class selects any element that does not contain children for a given selector.

/* Changes the background color of every empty section element */ section:empty

If we were to run that code on a page, the CSS would look for a element that contains no content between the tags. That might look something like this:

 
I have content
 
 
I have content, too!
 
 
// HIGHLIGHT 

An element with nothing between its tags is empty.

That includes if an element contains a code comment.

And if the CSS for the element has generated content — as from a pseudo-element like ::before or ::after — it is also still considered empty.

An element is said to have “children” if it contains another element node, text or even textual white space in between its tags. The elements in the following code are considered “non-empty” ones.

 
I'm a child of this article element.
 
 
This text is considered a child.
 

But be careful! Code editors may create unwanted white space, making an otherwise empty element a non-empty one.

Answer by Vivian Mayer

Example: check if input is empty css

/* If input is not empty */ input:not(:placeholder-shown) < /* You need to add a placeholder to your fields. For example: */ border-color: green; > /* If input is empty */ input:placeholder-shown

Answer by Derrick Hunter

I given a couple of pretty basic examples but the world is your oyster; try it out where needed and see what you can do. I personally came across :not and :empty when needing to suppress the styling of some empty messages divs in a CMS system – I’d keep seeing blank yellow or blue boxes all over the place. Using :empty I was able to remove the existing styling when the element didn’t have a message, without having to hack the core stylesheet.,This will put a blue border around the element. Note that because it contains no content, if the element has no padding then it will be more like a line than a bordered element, but it’s just an example.,When the following style is applied, the first paragraph will have a red border and some padding, and the second paragraph with have no additional styling applied, unless it’s been defined elsewhere:,You can also :not in conjunction with :empty to do the opposite: apply a style when the element is not empty. Consider the following two paragraphs:

You can apply a style to this element if it contains no content like so:

When the following style is applied, the first paragraph will have a red border and some padding, and the second paragraph with have no additional styling applied, unless it’s been defined elsewhere:

Источник

CSS :not and :empty selectors to apply styles when an element is empty and not empty

There may be times you need to apply a style if an element is empty, or if it is not empty. Use the :not & :empty selectors to do this, as shown in this post. They are supported by all modern browsers, and Internet Explorer from 9 and up.

tl;dr

Applying styles to an empty element

You can use :empty to apply styles to element that contains no content. For example:

You can apply a style to this element if it contains no content like so:

This will put a blue border around the element. Note that because it contains no content, if the element has no padding then it will be more like a line than a bordered element, but it’s just an example.

Note that being empty means there is no content at all, including white space.

Applying styles to an element that is not empty

You can also :not in conjunction with :empty to do the opposite: apply a style when the element is not empty. Consider the following two paragraphs:

When the following style is applied, the first paragraph will have a red border and some padding, and the second paragraph with have no additional styling applied, unless it’s been defined elsewhere:

Browser support

• Chrome 4.0+
• Firefox 3.5+
• Internet Explorer 9.0+
• Safari 3.2+
• Opera 9.6+

I’ve personally tested it myself on the following, which it works on:

• Chrome 36 on Windows 7
• FF29 on Windows 7
• FF30 & FF32 on WindowsXP
• IE9 on Windows 7
• IE10 on Windows 8
• IOS7
• Default browser on Android 4.1.2 on a Sony Xperia Acro S
• Chrome 36 on Android 4.1.2 on a Sony Xperia Acro S

And of course I double checked that it doesn’t work in IE8, and it doesn’t.

Examples

Try it yourself

I given a couple of pretty basic examples but the world is your oyster; try it out where needed and see what you can do. I personally came across :not and :empty when needing to suppress the styling of some empty messages divs in a CMS system – I’d keep seeing blank yellow or blue boxes all over the place. Using :empty I was able to remove the existing styling when the element didn’t have a message, without having to hack the core stylesheet.

Check Out These Related posts:

Источник

:empty

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.

Try it

Note: In Selectors Level 4, the :empty pseudo-class was changed to act like :-moz-only-whitespace , but no browser currently supports this yet.

Syntax

Examples

HTML

div class="box"> div> div class="box">I will be pink.div> div class="box"> div> div class="box"> p> p> div> 

CSS

body  display: flex; justify-content: space-around; > 

.box  background: pink; height: 80px; width: 80px; > .box:empty  background: lime; > 

Result

Accessibility concerns

Assistive technology such as screen readers cannot parse interactive content that is empty. All interactive content must have an accessible name, which is created by providing a text value for the interactive control’s parent element (anchors, buttons, etc.). Accessible names expose the interactive control to the accessibility tree, an API that communicates information useful for assistive technologies.

The text that provides the interactive control’s accessible name can be hidden using a combination of properties that remove it visually from the screen but keep it parsable by assistive technology. This is commonly used for buttons that rely solely on an icon to convey purpose.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник