Html 仅使用 CSS（无 JavaScript）的输入字段中的占位符文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11371047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placeholder text in an input field with CSS only (no JavaScript)
提问by David Jones
Instead of labeling each field in a form, it is sometimes preferable (from a design standpoint) to have placeholder text in each field. For example, instead of having this:
有时最好（从设计的角度）在每个字段中包含占位符文本，而不是在表单中标记每个字段。例如，而不是这样：
----------------------------------
Full Name: | |
----------------------------------
you have this:
你有这个：
----------------------------------
| Full Name |
----------------------------------
The when you click in the field, the text disappears and you can write whatever you want. If you skip over the field without entering any text, then the placeholder reappears.
当您在该字段中单击时，文本会消失，您可以随心所欲地书写。如果您跳过该字段而不输入任何文本，则占位符会重新出现。
I've seen this done many ways, but all methods involve JavaScript. For example, Twitter does a decent job on their signup pagebut if Javascript is disabled you end up typing your name over the word 'Full name'.
我已经看到很多方法可以做到这一点，但所有方法都涉及 JavaScript。例如，Twitter 在他们的注册页面上做得不错，但如果禁用了 Javascript，你最终会在“全名”这个词上输入你的名字。
I'm looking for a CSS-only method that would work even with JavaScript disabled. The only potential solution I've come up with is to set the background of the <input>tag to an image of the desired text and then use the input:focuspseudo-class to clear the background image when someone clicks on the text box. This seems to work but it would be nice not to have to use images.
我正在寻找一种即使在禁用 JavaScript 的情况下也能工作的纯 CSS 方法。我想出的唯一可能的解决方案是将<input>标签的背景设置为所需文本的图像，然后input:focus在有人单击文本框时使用伪类清除背景图像。这似乎有效，但不必使用图像会很好。
Does anyone know of a good resource on how to do this?
有谁知道如何做到这一点的好资源？
回答by Jay
This is the preferred method, and works in all current browsers:
这是首选方法，适用于所有当前浏览器：
<input type="text" name="" placeholder="Full Name"/>
This version works for IE9 and before:
此版本适用于 IE9 及之前：
<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>
回答by ThinkingStiff
You can do this with a <label>placed behind the index using z-indexand a transparent background-coloron the <input>. Use :focusto change to a white background.
您可以使用<label>放置在索引后面的z-index和 透明background-color的<input>. 使用:focus更改为白色背景。
:first-linehas some Firefox issues.
:first-line有一些 Firefox 问题。
Demo: http://jsfiddle.net/ThinkingStiff/bvJ43/
演示：http: //jsfiddle.net/ThinkingStiff/bvJ43/
Note:See code-sushi's comment below for blur issues: Placeholder text in an input field with CSS only (no JavaScript)
注意：有关模糊问题，请参阅下面的 code-sushi 评论：仅使用 CSS 的输入字段中的占位符文本（无 JavaScript）
Output:
输出：
HTML:
HTML：
<label class="input">enter name<input /><label>?
CSS:
CSS：
.input {
color: gray;
display: block;
font-size: small;
padding-top: 3px;
position: relative;
text-indent: 5px;
}
input {
background-color: transparent;
left: 0;
position: absolute;
top: 0;
z-index: 1;
}
input:focus, input:first-line {
background-color: white;
}
回答by Mr_Green
Try this:
尝试这个：
HTML
HTML
<div>
<input type="text" id="text"></input>
<label for="text">required</label>
</div>
CSS
CSS
.text-wrapper {
position: relative;
}
.text-input-label {
position: absolute;
/* left and right properties are based on margin, border, outline and padding of the input text field */
left: 5px;
top: 3px;
color: #D1D1D1;
}
#text:focus + label {
display: none;
}
回答by code-sushi
All of the presumably CSS-only answers above have neglected a critical component which is required in order to prevent the label acting as a pseudo-placeholder from "bleeding through" once the user is no longer focused on that particular field.
上面所有可能只有 CSS 的答案都忽略了一个关键组件，一旦用户不再专注于该特定领域，就需要该组件来防止充当伪占位符的标签“渗漏”。
Hint:
暗示：
input:valid { background-color:white; }
The pseudo-class :validobtains whenever a field has any value other than ''. So when your user enters anything in the field of his or her own, the label displayed there will stop being displayed.
伪类:valid在字段具有除 之外的任何值时获取''。因此，当您的用户在他或她自己的字段中输入任何内容时，显示在那里的标签将停止显示。
Be advised with <input type="email" />fields, the pseudo-class :validdoes and will actually require input of a valid email format (e.g. "[email protected]" -- or .net or .org, etc.).
请注意<input type="email" />字段，伪类:valid确实并且实际上需要输入有效的电子邮件格式（例如“[email protected]”——或 .net 或 .org 等）。
Full instructions how to do this here: http://css-tricks.com/float-labels-css/
如何在此处执行此操作的完整说明：http: //css-tricks.com/float-labels-css/
