Comments on: :valid

By: adaptabi

adaptabi — Wed, 06 Dec 2017 15:34:49 +0000

In reply to Jip.

Jip, It doesn’t work – as attribute selector refers to xml markup and not the actual — in memory – value of the input that the user has changed

By: Jip

Jip — Mon, 04 Dec 2017 23:02:11 +0000

So how about this:

input[type=”text”][value]:not([value=””])

By testing for ‘value’ (but not ’empty’) you won’t have to test for ‘valid’ or combine ‘required’.

By: deepa

deepa — Fri, 07 Oct 2016 05:28:11 +0000

which is the valid css selectors?

div
_div
.element
#element

By: Juan Carlos Rois

Juan Carlos Rois — Sat, 11 Jul 2015 11:29:48 +0000

After much research and experimenting I found out that a selector with input[value=""] will match when using the ":valid" pseudo class.

By: Fredrik

Fredrik — Mon, 02 Jun 2014 09:54:50 +0000

The :valid and :invalid selector respectively aren't actually parts of the Selectors Level 3 spec, but of Level 4.

By: amir

amir — Fri, 19 Apr 2013 10:13:42 +0000

hello

By: Anoniem

Anoniem — Thu, 14 Jun 2012 14:27:04 +0000

My attempt to explain the :valid selector: The :valid selector is basically a pseudo-class which can work together with the input element. Let’s say you use the input element to check if a user types something correct or wrong. Now with the :valid selector you can edit let’s say the color of an input field so the user knows if it is correct or wrong. If a word is typed correctly, the input box becomes green:

:valid {
  background-color: green;
}

Browser compatibility: Chrome 10, Firefox 4, Internet explorer 10, Opera 10, Safari 5. Firefox mobile 4, Opera mobile 10, Safari 5. Here’s a very nice demo from the mozilla website: https://developer.mozilla.org/samples/cssref/input-validation.html