GeezerVison is showing developer.mozilla.org — :invalid CSS pseudo-class - CSS | MDN
:invalid CSS pseudo-class
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
label {
display: block;
margin-top: 1em;
}
input:invalid {
background-color: ivory;
border: none;
outline: 2px solid red;
border-radius: 5px;
}
<label for="email">Email Address:</label>
<input id="email" name="email" type="email" value="na@[email protected]" />
<label for="secret">Secret Code: (lower case letters)</label>
<input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
<label for="age">Your age: (18+)</label>
<input id="age" name="age" type="number" value="5" min="18" />
<label
><input name="tos" type="checkbox" required checked /> - Do you agree to
ToS?</label
>
css
:invalid {
/* ... */
}
The color red is commonly used to indicate invalid input. People who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. Typically, descriptive text and/or an icon are used.
HTML
html
<form>
<div class="field">
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
</div>
<div class="field">
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required />
</div>
</form>
CSS
css
label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: maroon;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
Result
In this example we use :invalid along with ~, the subsequent-sibling combinator, to make a form appear in stages, so the form initially shows the first item to complete, and when the user completes each item the form displays the next one. When the whole form is complete the user can submit it.
HTML
html
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="form-name">Name</label><br />
<input type="text" name="name" id="form-name" required />
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="form-email">Email Address</label><br />
<input type="email" name="email" id="form-email" required />
</fieldset>
<fieldset>
<legend>Message</legend>
<label for="form-message">Message</label><br />
<textarea name="message" id="form-message" required></textarea>
</fieldset>
<button type="submit" name="send">Submit</button>
</form>
document.querySelector("form").addEventListener("submit", (event) => {
event.preventDefault();
});
CSS
css
/* Hide the fieldset after an invalid fieldset */
fieldset:invalid ~ fieldset {
display: none;
}
/* Dim and disable the button while the form is invalid */
form:invalid button {
opacity: 0.3;
pointer-events: none;
}
input,
textarea {
box-sizing: border-box;
width: 100%;
font-family: monospace;
padding: 0.25em 0.5em;
}
button {
width: 100%;
border: thin solid darkgrey;
font-size: 1.25em;
background-color: darkgrey;
color: white;
}
Result
If any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected. (Grouped radio buttons share the same value for their name attribute.)
By default, Gecko does not apply a style to the :invalid pseudo-class. However, it does apply a style (a red "glow" using the box-shadow property) to the :user-invalid pseudo-class, which applies in a subset of cases for :invalid.