10

有时最好（从设计的角度）在每个字段中包含占位符文本，而不是在表单中标记每个字段。例如，而不是这样：

             ----------------------------------
Full Name:  |                                  |
             ----------------------------------

你有这个：

 ----------------------------------
| Full Name                        |
 ----------------------------------

当您单击该字段时，文本会消失，您可以编写任何您想要的内容。如果您跳过该字段而不输入任何文本，则占位符会重新出现。

我见过很多方法，但所有方法都涉及 JavaScript。例如，Twitter 在他们的注册页面上做得不错，但是如果禁用了 Javascript，你最终会在“全名”这个词上输入你的名字。

我正在寻找一种即使禁用 JavaScript 也能工作的纯 CSS 方法。我想出的唯一可能的解决方案是将<input>标签的背景设置为所需文本的图像，然后input:focus在有人单击文本框时使用伪类清除背景图像。这似乎可行，但不必使用图像会很好。

有谁知道如何做到这一点的好资源？

4

5 回答 5

31

这是首选方法，适用于所有当前浏览器：

<input type="text" name="" placeholder="Full Name"/>

此版本适用于 IE9 及之前版本：

<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>
于 2012-12-01T15:01:17.870 回答
15

您可以使用<label>放置在索引后面z-index并background-color在<input>. 用于:focus更改为白色背景。

:first-line有一些 Firefox 问题。

演示：http: //jsfiddle.net/ThinkingStiff/bvJ43/

注意：有关模糊问题，请参阅下面的 code-sushi 评论：Placeholder text in an input field with CSS only (no JavaScript)

输出：

在此处输入图像描述

HTML：

<label class="input">enter name<input /><label>​

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;
}
于 2012-07-07T00:08:22.277 回答
1

试试这个：

HTML

<div>
    <input type="text" id="text"></input>
    <label for="text">required</label>
</div>

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;
}

工作小提琴

于 2013-11-11T05:34:48.360 回答
0

试试这个：它解决了溢出的占位符和多输入的情况。诀窍是将标签移动到输入后面并在视觉上重新排序。

你不需要额外的 div 来实现你想要的。

于 2012-07-07T00:24:54.337 回答
0

上面所有可能仅限 CSS 的答案都忽略了一个关键组件，一旦用户不再关注该特定字段，该组件是防止充当伪占位符的标签“渗出”所必需的。

暗示：

input:valid { background-color:white; }

:valid只要字段具有除 以外的任何值，伪类就会获得''。因此，当您的用户在他或她自己的字段中输入任何内容时，那里显示的标签将停止显示。

请注意<input type="email" />字段，伪类:valid确实并且实际上需要输入有效的电子邮件格式（例如“xxxx@xxx.com” - 或.net或.org等）。

如何在此处执行此操作的完整说明：http: //css-tricks.com/float-labels-css/

于 2014-10-31T19:07:25.190 回答