Articles Tagged

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

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

From there, a special message pops …

/* 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