Comments on: :invalid

By: Howard Brown

Howard Brown — Thu, 15 Dec 2022 19:39:34 +0000

Other than the part about chaining :after with :invalid, very good, but it would also be very helpful to also talk about how an (input) element’s :invalid pseudo class can be set or cleared (:valid set) or at least provide a link to such.

Thank you

By: Mig

Mig — Thu, 03 Dec 2020 08:55:32 +0000

Worth noting that :invalid on select element does not work on Safari/Mac (at least version 13).

Also for people who use this to mimic placeholder gray color on input fields, note that Firefox dev edition on mac renders colors differently for both. I don’t know why. Same color hex ref but renders differently.

By: CITguy

CITguy — Wed, 29 Apr 2020 17:14:17 +0000

IE will incorrectly match :invalid on :disabled inputs.

/* IE will match :disabled:invalid */
input:invalid { /* ... */ }

To fix this, we have to increase selector specificity with the :enabled pseudo-class.

/* Works across all modern browsers (and IE) */
input:enabled:invalid { /* ... */ }

By: Guido

Guido — Mon, 14 Nov 2016 17:23:59 +0000

Can you update the Browser Support table?

According to caniuse.com android and iOS now support :invalid pseudo-class.

@link http://caniuse.com/#search=%3Ainvalid

By: David

David — Sun, 18 Sep 2016 22:45:26 +0000

It should be noted that [value=”] only captures the initial state of the element, which makes it kind of useless as a selector.

By: Will

Will — Tue, 12 Apr 2016 21:17:19 +0000

In reply to Neil Osman. Was just going to mention the same thing: can't actually use generated content on input elements. Just spent 20 minutes trying to do it based on this article before I remembered why it wasn't working! :)

By: Endel

Endel — Tue, 24 Mar 2015 16:52:19 +0000

In reply to Neil Osman.

You’re right, Neil.

Here is some explanation why it’s not possible: http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field

By: h

Mon, 23 Mar 2015 14:04:26 +0000

gcfbv

By: h

Mon, 23 Mar 2015 14:01:21 +0000

dfs

By: Neil Osman

Neil Osman — Mon, 22 Sep 2014 08:45:41 +0000

Hi Chris, you may want to update this content as it contain a slight inaccuracy – in “Points of interest” it says we can chain :invalid to :before :after to display some ‘content’ on inputs, but as a matter of fact we can’t use ::after and ::before on inputs (regardless of chaining).

input[required]:invalid::after,
input[required]:valid::after {
content: ‘not a chance’;
}
Neil

By: Diego Leme

Diego Leme — Thu, 24 Jul 2014 18:17:15 +0000

Bug in IE10+ usign pseudo-elements

By: Saher Team

Saher Team — Fri, 20 Jun 2014 06:42:40 +0000

Solidify Your Examples:

Email: youremail@domain.com
Email (required) : chris@domain.com > becomes Valid _

By: c

Tue, 10 Jun 2014 10:13:11 +0000

this is ok.