在仅包含CSS的输入字段中占位符文本（无JavaScript）

而不是标记表单中的每个字段，有时在每个字段中都有占位符文本（从设计角度来看）是优选的。例如，而不是这样的：在仅包含CSS的输入字段中占位符文本（无JavaScript）

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

你有这样的：

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

的，当你在野外单击，文字消失，你可以写任何你想要的。如果您在未输入任何文本的情况下跳过该字段，则会重新出现占位符。

我已经看到这样做有很多方法，但所有方法都涉及JavaScript。例如，Twitter在他们的signup page上做了一个体面的工作，但是如果Javascript被禁用，你最终会在“全名”这个词上输入你的名字。

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

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

来源

2012-07-06 David Jones

如果你解释占位符属性做什么对于那些不灵通这将是很好。就像我在一分钟前。我不认为旧的CSS（预HTML5/CSS3时代）可以做到这一点...... – TheZ 2012-07-06 23:52:16

我认为你正在将CSS推进到它不能执行你所期望的任务的领域。有'* before'和':: after'伪元素的* *可能性，但是它们对'input'元素不可靠，任何实现了伪元素的浏览器也会实现'placeholder'属性。 – 2012-07-06 23:52:18

通过“占位符”，我认为他指的是显示示例文本的文本框（例如：“您的姓名在这里”），直到用户选择它。 – username 2012-07-06 23:57:31

这是首选的方法，在目前所有的浏览器上运行：

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

该版本适用于IE9和之前：

<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>

来源

2012-12-01 15:01:17 Jay

+15

我可能会在这里丢失一些明显的东西，但即使在用户输入值后，第二个版本的值是否也会将值设置为“全名”？ – Chris 2013-06-12 11:00:38

是的，它会 - 那里需要有一个条件语句表示它将只会恢复到'全名'，如果模糊值是'value =''' – 2014-11-03 16:54:42

OP问是否可以在CSS中做。 – 2016-05-18 05:22:49

您可以使用z-index放置在索引后面的<label>和<input>上的透明background-color执行此操作。使用:focus更改为白色背景。

:first-line有一些Firefox问题。

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

注：见下面的代码寿司的评论对模糊的问题：Placeholder text in an input field with CSS only (no JavaScript)

输出：

enter image description here

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-07 00:08:22 ThinkingStiff

这感觉真的很接近。如果我们想出一种方法来允许输入比占位符短的情况，那么这将是完美的...... – 2012-07-07 04:25:49

@danielfaraday我认为在几乎所有情况下，数据都会比占位符长。保持占位符字体小，标签简短，你可能很好。你可以多玩一些''第一线'，但我无法得到任何东西使它占用整个'输入'。 – ThinkingStiff 2012-07-07 04:33:57

@Knu：你可以发布你的代码吗？您之前的链接对我来说看起来一样（占位符文本出现在模糊处）。 – 2012-07-07 11:31:02

尝试this：它解决了四溢的占位符和多输入病例。诀窍是将标签移动到输入后面并对其进行可视化重新排序。

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

来源

2012-07-07 00:24:54 Knu

不错！但它遭受同样的问题。当你在那里放置一些文字并模糊时，占位符显示出来。 – ThinkingStiff 2012-07-07 00:29:43

@ThinkingStiff这是一个与键盘导航场景相关的边缘情况。 – Knu 2012-07-07 00:40:46

@Kun Edge案例？无论何时您输入一些文字，然后让输入移动到下一个文字，您的占位符将覆盖您刚输入的文字。这是一个主要的用例。 +1为''的想法。 – ThinkingStiff 2012-07-07 00:43:55

试试这个：

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

Working Fiddle

来源

2013-11-11 05:34:48

仍然没有布宜诺斯 - 模糊你可以看到标签。你需要为'input：valid'设置一个类来停止显示标签。 – 2014-11-03 17:01:19

所有可能CSS-唯一的答案以上都忽视了这是为了防止作为来自“出血伪占位符标签所需的重要组成部分通过“一旦用户不再关注该特定领域。

提示：

input:valid { background-color:white; }

伪类:valid获得每当场具有比''以外的任何值。所以当你的用户在他或她自己的领域输入任何东西时，显示在那里的标签将停止显示。

建议使用<input type="email" />字段，伪类:valid确实需要输入有效的电子邮件格式（例如“[email protected]” - 或.net或.org等）。

完整说明如何在这里做到这一点：http://css-tricks.com/float-labels-css/

来源

2014-10-31 19:07:25

在仅包含CSS的输入字段中占位符文本（无JavaScript）

回答

相关问题