YouTip

## CSS :invalid Pseudo-class Selector The `:invalid` CSS pseudo-class represents any `` or other `

` element whose contents fail to validate according to the element's input validation requirements. It allows you to dynamically style form controls to provide immediate visual feedback to users when their input is incorrect. --- ## Definition and Usage The `:invalid` selector is used to target and style form elements that contain invalid data. ### How Validation is Triggered An element is considered invalid if it does not meet its validation constraints. This commonly occurs with: * `type="email"` fields containing an improperly formatted email address. * `type="number"` or range inputs with values outside the specified `min` or `max` limits. * `required` fields that are left empty. * Inputs with a `pattern` attribute where the value does not match the specified regular expression. --- ## Syntax ```css :invalid { /* CSS declarations */ } ``` You can also chain it with specific element selectors for more targeted styling: ```css input:invalid { border-color: red; } select:invalid { color: gray; } ``` --- ## Code Examples ### Example 1: Basic Input Validation Styling In this example, if the user enters an invalid email address or leaves a required field empty, the input border will turn red. ```html Email Address (Required): Age (Must be between 18 and 99): Submit

``` ```css /* Apply a red border and light red background to invalid inputs */ input:invalid { border: 2px solid #ff4d4d; background-color: #ffe6e6; } /* Optional: Apply a green border to valid inputs for contrast */ input:valid { border: 2px solid #2ecc71; background-color: #eafaf1; } ``` ### Example 2: Displaying Validation Error Messages You can combine `:invalid` with sibling combinators (like `+` or `~`) to show or hide helper text dynamically. ```html ``` ```css /* Hide the error message by default */ .error-message { display: none; color: #ff4d4d; font-size: 0.85em; margin-top: 5px; } /* Show the error message only when the input is invalid and focused */ input:invalid:focus + .error-message { display: block; } ``` --- ## Browser Support The `:invalid` pseudo-class has excellent modern browser support: | Selector | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`:invalid`** | 10.0+ | 10.0+ | 4.0+ | 5.0+ | 10.0+ | --- ## Important Considerations 1. **Immediate Validation (The "Pre-flight" Issue):** By default, browsers apply `:invalid` styles as soon as the page loads. If you have a `required` field, it will appear invalid (e.g., red) before the user even has a chance to type. * *Solution:* To prevent this, you can use the modern `:user-invalid` pseudo-class. `:user-invalid` only represents an element that is invalid *after* the user has interacted with it. 2. **Form-Level Validation:** You can also target entire `

` elements using `form:invalid` to style the container or disable certain layout elements when any field inside is invalid. --- ## Related Pages * [CSS `:valid` Selector](sel-valid.html) - Styles form elements that contain valid data. * [CSS `:user-invalid` Selector] - Styles invalid elements only after user interaction. * [CSS `:required` Selector] - Styles form elements that are marked as mandatory.