1
Input Field Styling
Detects changes in text input appearance: borders, backgrounds, padding, and font properties.
35 test cases
Forms & States
Forms concentrate a disproportionate share of an application's value: sign-up, checkout, search, banking transaction approval, ticket entry inside an ERP. A visual regression on a single field can crater a conversion rate or block a business operator in the middle of a critical process. The risk is not limited to the field's resting appearance but extends to its derived states: focus, hover, disabled, error, success, plus placeholders and helper text. When a developer strips an outline to "make things cleaner," WCAG accessibility takes the hit and keyboard users no longer know which field they are typing in. When the global helper-text styling shifts, validation errors can drift from red to light gray and become unreadable. Classic regressions come from a CSS grid change shrinking the search bar, a reset wiping the native styling of checkboxes and radios, or a UI framework upgrade that subtly modifies input borders and heights. Delta-QA captures forms across their various states and compares those captures against the visual baseline. The perceptual analysis surfaces message color changes, missing focus indicators, fields whose dimensions shifted, altered placeholders, and error states that no longer stand out visually. This coverage removes the need to manually test every input scenario on every form at every deploy, and guarantees that critical conversion or business operation flows stay visually consistent between releases.
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.