CSS :valid

The CSS :valid pseudo-class targets form elements that have valid input data. It is commonly used with form elements such as <input>, <textarea>, and <select> to style fields when their data satisfies the input validation criteria (e.g., pattern, type, or required attribute).

The syntax for the :valid pseudo-class is:

</>
Copy
selector:valid {
    property: value;
}

Where:

ParameterDescription
selectorThe form element (e.g., <input>, <textarea>) to which the :valid pseudo-class will apply.
propertyThe CSS property to style the valid element.
valueThe value assigned to the CSS property.

Examples

1. Styling Valid Email Inputs

In this example, a valid email input field is styled with a green border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:valid {
            border: 2px solid green;
        }

        input:invalid {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <form>
        <label>Email:</label>
        <input type="email" placeholder="Enter a valid email" required>
    </form>
</body>
</html>

2. Styling Valid Number Inputs

Here, a valid number input field within a specified range is styled with a blue background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:valid {
            background-color: lightblue;
        }

        input:invalid {
            background-color: lightpink;
        }
    </style>
</head>
<body>
    <form>
        <label>Number (1-10):</label>
        <input type="number" min="1" max="10" required>
    </form>
</body>
</html>

3. Styling Valid Password Inputs

In this example, a valid password input field is styled with bold text and a green border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input[type="password"]:valid {
            border: 2px solid green;
            font-weight: bold;
        }

        input[type="password"]:invalid {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <form>
        <label>Password (min 6 characters):</label>
        <input type="password" minlength="6" required>
    </form>
</body>
</html>

4. Styling Valid Textareas

Here, a valid textarea field is styled with a lightgreen background when the input satisfies the length constraint.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        textarea:valid {
            background-color: lightgreen;
        }

        textarea:invalid {
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <form>
        <label>Comment (min 10 characters):</label>
        <textarea minlength="10" required></textarea>
    </form>
</body>
</html>

5. Styling Valid Select Dropdowns

In this example, a valid <select> dropdown is styled with a green border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        select:valid {
            border: 2px solid green;
        }

        select:invalid {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <form>
        <label>Choose an option:</label>
        <select required>
            <option value="">Select one</option>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </form>
</body>
</html>