1
Input Field Styling
Detects changes in text input appearance: borders, backgrounds, padding, and font properties.
35 test cases
Forms & States
Form elements are critical touchpoints in user interaction. A broken validation state, a missing focus indicator, or an unstyled input can lead to user frustration and data entry errors. Delta-QA monitors every form-related visual state.
What we detect
2
Checkbox & Radio
Monitors custom checkbox and radio button styling, including checked/unchecked visual states.
3
Validation States
Catches changes in :valid, :invalid, :required pseudo-class styling and error message presentation.
4
Focus Indicators
Tracks :focus and :focus-visible styling changes critical for keyboard navigation accessibility.
5
Placeholder Styling
Detects ::placeholder pseudo-element changes in color, opacity, and font properties.
6
Button States
Monitors hover, active, disabled, and default button states for visual consistency.
Live example
See exactly what Delta-QA detects. Compare the two versions side by side.
Before
After
Real-world scenarios
🎯
The placeholder that masks errors
A developer changes global help text styles and, as a side effect, the sign-up form error messages switch from red to light gray. Your visitors submit an invalid email, see a message below the field... that they can't read because it's light gray on a white background. They think the site is broken and leave. Nobody has time to check every error state on every form for every deployment. Delta-QA compares screenshots and highlights the color change on the message — the text that became nearly invisible stands out in the diff.
⚠️
The search field that shrinks
A developer modifies the header CSS grid to add a new navigation link. The search bar shrinks to half its size to make room. On mobile, it becomes tiny — unusable. Your visitors can't find your products because typing in such a small field is frustrating. The developer checked that the new link displayed correctly, not that the search bar had shrunk next to it. Delta-QA compares screenshots and highlights the bar's shrinkage — the size change is clearly visible in the overlay.
💡
The invisible focus state
A developer adds outline: none on inputs "for a cleaner look." Visually, when a user clicks into a field, nothing indicates which field is active anymore — the blue outline is gone. It's also a WCAG accessibility violation. Manually checking the focus state of every field on every form is unrealistic. Delta-QA captures each field's focus state and compares screenshots: the missing blue outline jumps out immediately in the visual diff.
Ready to catch every visual regression?
Download Delta-QA and start detecting CSS changes in your web pages — no code required.