1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
title: ':invalid'
slug: 'Web/CSS/:invalid'
tags:
- CSS
- CSS Pseudoelement
- Layout
- Referenz
- Web
translation_of: 'Web/CSS/:invalid'
---
<p>{{ CSSRef() }}</p>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <a href="/de/CSS/Pseudo-classes" title="Pseudoklassen">Pseudoklasse</a> <code>:invalid </code>entspricht jedem {{ HTMLElement("input") }}- oder {{ HTMLElement("form") }}-Element, dessen Inhalt nicht gemäß der Eigenschaften des Eingabeelements <a href="/en/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">validiert</a> werden kann. Dadurch kann die Darstellung ungültiger Felder auf einfache Weise angepasst werden, damit Benutzer*innen fehlerhafte Eingaben gut identifizieren und korrigieren können.</p>
<p>Standardmäßig wendet Gecko keinen Stil auf die Pseudoklasse <code>:invalid</code> an. Jedoch wendet es einen Stil (ein rotes "Leuchten" mithilfe der Eigenschaft {{ Cssxref("box-shadow") }}) auf die Pseudoklasse {{ Cssxref(":-moz-ui-invalid") }} an, der einen Teil der Fälle für <code>:invalid</code> betrifft.</p>
<p>Das Leuchten kann mit dem folgenden CSS ausgeschaltet werden. Es kann auch komplett überschrieben werden, um das Aussehen von ungültigen Feldern anzupassen.</p>
<pre class="brush: css">:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow: none;
}
</pre>
<h2 id="Syntax">Syntax</h2>
{{csssyntax}}
<h2 id="Anmerkungen">Anmerkungen</h2>
<h4 id="Radio_Buttons">Radio Buttons</h4>
<p>Wenn in einer Gruppe von Radio Buttons (d.i., wenn alle den gleichen Wert für ihr <code>name</code>-Attribut besitzen) kein Radio Button ausgewählt ist und mindestens einer die Eigenschaft <code>required</code> hat, wird die Pseudoklasse <code>:invalid</code> auf alle Radio Buttons der Gruppe angewendet.</p>
<h2 id="Example2" name="Example2">Beispiel</h2>
<p>Dieses Beispiel zeigt ein einfaches Formular, dessen gültige Elemente grün und dessen ungültige Elemente rot gefärbt werden.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><form>
<label for="url_input">Geben Sie eine URL ein:</label>
<input type="url" id="url_input" />
<br />
<br />
<label for="email_input">Geben Sie eine E-Mail-Adresse ein:</label>
<input type="email" id="email_input" required/>
</form></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<p>{{ EmbedLiveSample('Example2',600,150) }}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('HTML WHATWG', '#selector-invalid', ':invalid') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td>Keine Änderung.</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', '#selector-invalid', ':invalid') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>Definiert Semantik bezogen auf HTML und Überprüfung der Einschränkungen.</td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>Keine Änderung.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':invalid') }}</td>
<td>{{ Spec2('CSS3 Basic UI') }}</td>
<td>Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.</td>
</tr>
</tbody>
</table>
<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
<p>{{Compat("css.selectors.invalid")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{ cssxref(":valid") }}</li>
<li>{{ cssxref(":-moz-submit-invalid") }}</li>
<li>{{ cssxref(":required") }}</li>
<li>{{ cssxref(":optional") }}</li>
</ul>
|
