From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/ca/web/css/_colon_invalid/index.html | 141 ----------------------------- 1 file changed, 141 deletions(-) delete mode 100644 files/ca/web/css/_colon_invalid/index.html (limited to 'files/ca/web/css/_colon_invalid') diff --git a/files/ca/web/css/_colon_invalid/index.html b/files/ca/web/css/_colon_invalid/index.html deleted file mode 100644 index 94a89a737f..0000000000 --- a/files/ca/web/css/_colon_invalid/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: ':invalid' -slug: 'Web/CSS/:invalid' -tags: - - CSS - - Layout - - NeedsMobileBrowserCompatibility - - Pseudo-class - - Reference - - Web -translation_of: 'Web/CSS/:invalid' ---- -
{{CSSRef}}
- -

La pseudo-class CSS :invalid representa qualsevol element {{HTMLElement("input")}} o un altre {{HTMLElement("form")}} en que el seu contingut no es valida.

- -
/*  Selecciona qualsevol <input> invàlit */
-input:invalid {
-  background-color: pink;
-}
- -

Aquesta pseudo-class és útil per ressaltar errors de camp per a l'usuari.

- -

Sintaxi

- -{{csssyntax}} - -

Exemple

- -

Aquest exemple presenta una forma senzilla que acoloreix elements en verd quan es validen i vermells quan no ho fan.

- -

HTML

- -
<form>
-  <label for="url_input">Enter a URL:</label>
-  <input type="url" id="url_input" />
-  <br />
-  <br />
-  <label for="email_input">Enter an email address:</label>
-  <input type="email" id="email_input" required/>
-</form>
- -

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;
-}
-
-input:required:invalid {
-  border-color: #C00000;
-}
- -

Resultat

- -

{{EmbedLiveSample('Example', 600, 120)}}

- -

Notes

- -

Botons de ràdio

- -

Si un botó de ràdio qualsevol en un grup és required, la pseudo-class :invalid s'aplica a tots ells si no se selecciona cap dels botons del grup. (Els botons de ràdio agrupats comparteixen el mateix valor per al seu atribut name).

- -

Gecko per defecte

- -

Per defecte, Gecko no aplica un estil a la pseudo-class :invalid. Tanmateix, aplica un estil (un "resplendor" vermell usant la propietat {{Cssxref("box-shadow")}}) a la pseudo-class {{cssxref(":-moz-ui-invalid")}} que s'aplica en un subconjunt de casos per :invalid.

- -

Podeu desactivar la brillantor usant el següent CSS, o anul·lar-ho completament per alterar l'aparença dels camps no vàlids:

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

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}Cap canvi.
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica d'HTML i la validació de restriccions.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}Definició inicial.
- - - -
- - -

{{Compat("css.selectors.invalid")}}

-
- -

Vegeu també

- - -- cgit v1.2.3-54-g00ecf