[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ru/docs/Web/CSS/Reference/Selectors/:invalid [Back]  [Original]

:invalid - CSS: | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

:invalid

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 ..

CSS :invalid <input> <form> , , . , .

, Gecko :invalid. , ( "", box-shadow) :-moz-ui-invalid, :invalid.

, CSS .

css
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

In this article

(.., name) required, :invalid , .

, , , , .

HTML

html
<form>
  <label> URL:</label>
  <input type="url" />
  <br />
  <br />
  <label> . :</label>
  <input type="email" required />
</form>

CSS

css
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: #800000;
  border-width: 3px;
}

Specification
HTML
# selector-invalid
Selectors Level 4
# invalid-pseudo


Web Proxy Viewer  |  New URL  |  Original Page