diff options
Diffstat (limited to 'files/de/web/css/_colon_placeholder-shown/index.html')
| -rw-r--r-- | files/de/web/css/_colon_placeholder-shown/index.html | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/files/de/web/css/_colon_placeholder-shown/index.html b/files/de/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..e465bf658c --- /dev/null +++ b/files/de/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,122 @@ +--- +title: ':-moz-placeholder' +slug: Web/CSS/:placeholder-shown +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - Non-standard + - Platzhalter + - Selektoren +translation_of: Web/CSS/:placeholder-shown +translation_of_original: Web/CSS/:-moz-placeholder +original_slug: Web/CSS/:-moz-placeholder +--- +<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"><!DOCTYPE html> +<html> +<head> + <title>Placeholder demo</title> + <style type="text/css"> + input:-moz-placeholder { + color: green; + } + </style> +</head> +<body> + <input id="test" placeholder="Placeholder text!"> +</body> +</html> +</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> |