Articles Tagged
:valid

2 Articles

Detecting Specific Text Input with HTML and CSS

Direct Link

Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:

You have to press a special combination of keys on a keyboard.
Then type a secret password.

From there, a special message pops …

Shared by Chris Coyier on Nov 9, 2021

:invalid :not :placeholder-shown :valid focus

Form Validation Styling on Input Focus

/* Only show invalid ring while not focused */
input:not(:focus):not(:placeholder-shown):invalid {
  border-color: var(--color-invalid);
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
  display: block;	
}

/* Only show valid ring while not focused and if a value is entered */
/* :empty won't work

…

Geoff Graham on Mar 8, 2021