Invalid Input Shake Border
An email field that shakes once and glows red when the address is invalid, then draws a green check once it is fixed. Pure CSS: :invalid plus :not(:placeholder-shown), so it waits for typing.
Also known as: invalid input shake css, input error border animation, form validation border.
HTML
<label class="bdr-invalid-input-shake-border">
<span class="bdr-invalid-input-shake-border-label">Email</span>
<span class="bdr-invalid-input-shake-border-field">
<input type="email" value="hello@" placeholder=" " required>
<svg class="bdr-invalid-input-shake-border-check" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5" pathLength="1"/></svg>
<span class="bdr-invalid-input-shake-border-hint">That email looks incomplete</span>
</span>
</label>CSS
.bdr-invalid-input-shake-border {
--c: var(--bdr-color, #3b82f6);
font-size: var(--bdr-size, 16px);
--bad: #ef4444;
--good: #16a34a;
display: grid;
gap: 0.45em;
align-content: start;
width: 15em;
font-family: system-ui, sans-serif;
}
.bdr-invalid-input-shake-border-label {
font-size: 0.8em;
font-weight: 600;
opacity: 0.75;
}
.bdr-invalid-input-shake-border-field { position: relative; }
.bdr-invalid-input-shake-border input {
display: block;
box-sizing: border-box;
width: 100%;
padding: 0.75em 2.4em 0.75em 0.9em;
border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
border-radius: 0.6em;
background: color-mix(in srgb, var(--c) 5%, transparent);
color: inherit;
font: inherit;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.bdr-invalid-input-shake-border-field:hover input { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.bdr-invalid-input-shake-border input:focus {
border-color: var(--c);
box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--c) 20%, transparent);
}
.bdr-invalid-input-shake-border input:invalid:not(:placeholder-shown) {
border-color: var(--bad);
box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--bad) 18%, transparent), 0 0 1em color-mix(in srgb, var(--bad) 30%, transparent);
animation: bdr-invalid-input-shake-border-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.bdr-invalid-input-shake-border input:valid { border-color: var(--good); }
.bdr-invalid-input-shake-border-check {
position: absolute;
top: 50%;
right: 0.8em;
width: 1.2em;
height: 1.2em;
margin-top: -0.6em;
fill: none;
stroke: var(--good);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}
.bdr-invalid-input-shake-border input:valid + .bdr-invalid-input-shake-border-check { stroke-dashoffset: 0; }
.bdr-invalid-input-shake-border-hint {
position: absolute;
top: 100%;
left: 0.1em;
margin-top: 0.45em;
color: var(--bad);
font-size: 0.72em;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
}
.bdr-invalid-input-shake-border input:invalid:not(:placeholder-shown) ~ .bdr-invalid-input-shake-border-hint { opacity: 1; }
@keyframes bdr-invalid-input-shake-border-shake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-0.45em); }
30% { transform: translateX(0.4em); }
45% { transform: translateX(-0.3em); }
60% { transform: translateX(0.2em); }
75% { transform: translateX(-0.1em); }
}
@media (prefers-reduced-motion: reduce) {
.bdr-invalid-input-shake-border, .bdr-invalid-input-shake-border *, .bdr-invalid-input-shake-border::before, .bdr-invalid-input-shake-border::after, .bdr-invalid-input-shake-border *::before, .bdr-invalid-input-shake-border *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bdr-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--bdr-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.