files/de/web/css/_colon_-moz-placeholder/index.html


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

---
title: ':-moz-placeholder'
slug: 'Web/CSS/:-moz-placeholder'
tags:
  - CSS
  - CSS Pseudoklasse
  - CSS Referenz
  - Non-standard
  - Platzhalter
  - Selektoren
translation_of: 'Web/CSS/:placeholder-shown'
---
<div class="note"><strong>Hinweis:</strong> Die :-moz-placeholder Pseudoklasse ist in Firefox 19 als veraltet markiert zugunsten des {{cssxref('::-moz-placeholder')}} Pseudoelements.</div>

<div class="note"><strong>Hinweis:</strong>Die CSSWG hat beschlossen, <code>:placeholder-shown</code> einzuführen. Diese Funktionalität wird in Gecko irgendwann in der Zukunft wieder eingeführt, ohne Präfix und unter dem neuen Namen. {{bug("1069012")}}</div>

<div>{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>:-moz-placeholder</code> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert ein Formularelement, das <a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML#Das_placeholder_Attribut">Platzhaltertext</a> anzeigt. Dies erlaubt Webentwicklern und Themedesignern die Darstellung von Platzhaltertext anzupassen, welche standardmäßig einer hellgrauen Farbe entspricht. Dies ist in manchen Fällen unvorteilhaft, beispielsweise wenn der Hintergrundfarbe von Formularfeldern eine ähnliche Farbe zugewiesen wird. Hier kann die Pseudoklasse verwendet werden, um die Textfarbe des Platzhalters zu ändern.</p>

<h2 id="Beispiel">Beispiel</h2>

<p>Dieses Beispiel weist dem Platzhaltertext eine grüne Farbe zu.</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Placeholder demo&lt;/title&gt;
  &lt;style type="text/css"&gt;
    input:-moz-placeholder {
      color: green;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;input id="test" placeholder="Placeholder text!"&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Ergibt:</p>

<p>{{EmbedLiveSample('Beispiel', '100%', 30)}}</p>

<h2 id="Überlauf">Überlauf</h2>

<p>Oft werden Suchfelder oder andere Formularelemente auf mobilen Geräten verkürzt dargestellt. Leider passt u. U. der Platzhaltertext eines {{HTMLElement("input")}} Elements in die Länge des Elements, was einen abgeschnittenen Text zur Folge hat. Um diese Darstellung zu verhindern, kann die CSS Eigenschaft <code>text-overflow: ellipsis!</code> verwendet werden, um den Text mit einer Ellipse abzuschließen.</p>

<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }
</pre>

<p>David Walsh hat dies in seinem Blog Eintrag <a class="external" href="http://davidwalsh.name/placeholder-overflow">"Placeholders and Overflow"</a> beschrieben.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<p>Nicht Teil einer Spezifikation.</p>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Implementiert in {{bug("457801")}}.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML">Formulare in HTML5</a></li>
 <li>{{HTMLElement("input")}}</li>
 <li>{{HTMLElement("textarea")}}</li>
</ul>