Not empty selector css

:not(:empty) CSS selector is not working?

Being a void element, an element is considered empty by the HTML definition of «empty», since the content model of all void elements is always empty. So they will always match the :empty pseudo-class, whether or not they have a value. This is also why their value is represented by an attribute in the start tag, rather than text content within start and end tags.

The :empty pseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness;

Consequently, input:not(:empty) will never match anything in a proper HTML document. (It would still work in a hypothetical XML document that defines an element that can accept text or child elements.)

I don’t think you can style empty fields dynamically using just CSS (i.e. rules that apply whenever a field is empty, and don’t once text is entered). You can select initially empty fields if they have an empty value attribute ( input[value=»»] ) or lack the attribute altogether ( input:not([value]) ), but that’s about it.

Solution 2

It is possible with inline javascript onkeyup=»this.setAttribute(‘value’, this.value);» & input:not([value=»»]):not(:focus):invalid

input:not([value=""]):not(:focus):invalid

Solution 3

You could try using :placeholder-shown.

input < padding: 10px 15px; font-size: 16px; border-radius: 5px; border: 2px solid lightblue; outline: 0; font-weight:bold; transition: border-color 200ms; font-family: sans-serif; >.validation < opacity: 0; font-size: 12px; font-family: sans-serif; color: crimson; transition: opacity; >input:required:valid < border-color: forestgreen; >input:required:invalid:not(:placeholder-shown) < border-color: crimson; >input:required:invalid:not(:placeholder-shown) + .validation

Solution 4

.floating-label-input < position: relative; height:60px; >.floating-label-input input < width: 100%; height: 100%; position: relative; background: transparent; border: 0 none; outline: none; vertical-align: middle; font-size: 20px; font-weight: bold; padding-top: 10px; >.floating-label-input label < position: absolute; top: calc(50% - 5px); font-size: 22px; left: 0; color: #000; transition: all 0.3s; >.floating-label-input input:focus ~ label, .floating-label-input input:focus ~ label, .floating-label-input input:valid ~ label < top: 0; font-size: 15px; color: #33bb55; >.floating-label-input .line < position: absolute; height: 1px; width: 100%; bottom: 0; background: #000; left: 0; >.floating-label-input .line:after < content: ""; display: block; width: 0; background: #33bb55; height: 1px; transition: all 0.5s; >.floating-label-input input:focus ~ .line:after, .floating-label-input input:focus ~ .line:after, .floating-label-input input:valid ~ .line:after

Solution 5

You may approach this differently; omit the use of the :empty pseudo-class, and utilize input events to detect a significant value in the field, then style it accordingly:

var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i++) < var input = inputs[i]; input.addEventListener('input', function() < var bg = this.value ? 'green' : 'red'; this.style.backgroundColor = bg; >); >

body < padding: 40px; >#inputList li < list-style-type: none; padding-bottom: 1.5em; >#inputList li input, #inputList li label < float: left; width: 10em; >#inputList li input < color: white; background-color: red; >#inputList li label

Related

• Another post on DOM Mutation Events, suggesting the use of input Events (DOM Mutation Events are now deprecated in DOM level 4, and have been replaced by DOM Mutation Observers).

Disclaimer: note that input events are currently experimental, and probably not widely supported. nope! forget about it — it’s a living standard now.

Источник

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:

Источник

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:

Источник