diff options
Diffstat (limited to 'files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html')
| -rw-r--r-- | files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html | 68 |
1 files changed, 0 insertions, 68 deletions
diff --git a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html b/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html deleted file mode 100644 index af8a706fa9..0000000000 --- a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: conflicting/Web/CSS/:placeholder-shown -tags: - - CSS - - CSS Pseudo-class - - CSS Reference - - Non-standard -translation_of: Web/CSS/:placeholder-shown -translation_of_original: Web/CSS/:-moz-placeholder -original_slug: Web/CSS/:-moz-placeholder ---- -<p> </p> - -<div class="note"><strong>提示:</strong> <code><em>在Firefox 19+版本中</em> :-moz-placeholder</code> 伪类将被 {{ cssxref('::-moz-placeholder') }} 伪元素所替代.</div> - -<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name. {{bug(1069012)}}</div> - -<p>{{ CSSRef() }}{{Non-standard_header}}{{ gecko_minversion_header("2.0") }}</p> - -<h2 id="Summary" name="Summary">摘要</h2> - -<p><code> :-moz-placeholder</code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>控制元素所显示的文字占位符<a href="/en/HTML/Forms_in_HTML#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">文字占位符</a>. 它允许开发者/设计师改变文字占位符样式. 默认的文字占位符颜色为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.</p> - -<h2 id="示例">示例</h2> - -<p>这个示例将文字占位符改变为了绿色.</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><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">查看这个示例</a>.</p> - -<h2 id="溢出">溢出</h2> - -<p>在手机等设备上搜索框和表单字段经常会缩的很短,有时输入框并不能完全显示文字占位符,那么它便会被生硬的"切断".为了防止出现这种难看的效果,可以使用CSS <code>text-overflow: ellipsis;</code> 来省略一中间部分文字.</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>It was David Walsh, the man on fire who introduced this to a lot of designers. <a class="external" href="http://davidwalsh.name/placeholder-overflow" title="Placeholders and Overflow">Placeholders and Overflow</a>.</p> - -<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> - -<p>{{ Bug(457801) }}</p> - -<h2 id="SeeAlso" name="SeeAlso">See also</h2> - -<ul> - <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li> - <li>{{ HTMLElement("input") }}</li> - <li>{{ HTMLElement("textarea") }}</li> -</ul> |