mozilla

Revision 521275 of :-moz-placeholder

  • Revision slug: CSS/:-moz-placeholder
  • Revision title: :-moz-placeholder
  • Revision id: 521275
  • Created:
  • Creator: bowen-shi
  • Is current revision? No
  • Comment

Revision Content

{{ deprecated_header() }}

提示: :在Firefox 19+版本中 :-moz-placeholder 伪类将被 {{ cssxref('::-moz-placeholder') }} 伪元素所替代.

{{ CSSMozExtensionRef() }}

{{ gecko_minversion_header("2.0") }}

摘要

 :-moz-placeholder伪类控制元素所显示的文字占位符文字占位符. 它允许开发者/设计师改变文字占位符样式. 默认的文字占位符颜色为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.

示例

这个示例将文字占位符改变为了绿色.

<!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>

查看这个示例.

溢出

在手机等设备上搜索框和表单字段经常会缩的很短,有时输入框并不能完全显示文字占位符,那么它便会被生硬的"切断".为了防止出现这种难看的效果,可以使用CSS text-overflow: ellipsis; 来省略一中间部分文字.

input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }

It was David Walsh, the man on fire who introduced this to a lot of designers. Placeholders and Overflow.

Bugzilla

{{ Bug(457801) }}

提示

提示: This was previously incorrectly documented as having been created for Gecko 1.9 {{ geckoRelease("1.9") }}, for an entirely different purpose.

{{ languages( { "ja": "ja/CSS/:-moz-placeholder" } ) }}

See also

  • Forms in HTML5
  • {{ HTMLElement("input") }}
  • {{ HTMLElement("textarea") }}

Revision Source

<p>{{ deprecated_header() }}</p>
<div class="note">
 <strong>提示:</strong> <code>:<em>在Firefox 19+版本中</em> :-moz-placeholder</code> 伪类将被 {{ cssxref('::-moz-placeholder') }} 伪元素所替代.</div>
<p>{{ CSSMozExtensionRef() }}</p>
<p>{{ gecko_minversion_header("2.0") }}</p>
<h3 id="Summary" name="Summary">摘要</h3>
<p><code>&nbsp;:-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>
<h3 id=".E7.A4.BA.E4.BE.8B">示例</h3>
<p>这个示例将文字占位符改变为了绿色.</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><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">查看这个示例</a>.</p>
<h3 id=".E6.BA.A2.E5.87.BA">溢出</h3>
<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>
<h3 id="Bugzilla" name="Bugzilla">Bugzilla</h3>
<p>{{ Bug(457801) }}</p>
<h3 id=".E6.8F.90.E7.A4.BA">提示</h3>
<div class="note">
 <strong>提示:</strong> This was previously incorrectly documented as having been created for Gecko 1.9 {{ geckoRelease("1.9") }}, for an <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=11011" title="https://bugzilla.mozilla.org/show_bug.cgi?id=11011">entirely different purpose</a>.</div>
<p>{{ languages( { "ja": "ja/CSS/:-moz-placeholder" } ) }}</p>
<h3 id="SeeAlso" name="SeeAlso">See also</h3>
<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>
Revert to this revision