如何使用CSS设置占位符值？

Question

我想仅使用css而不是JavaScript或jQuery来设置输入框的占位符值.我怎样才能做到这一点？

Answer 1

您可以为webkit执行此操作:

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

http://jsfiddle.net/Z3tFG/1/

Answer 2

AFAIK,你不能单独使用CSS.CSS有content规则,但即便如此,也可以使用伪选择器在元素之前或之后插入内容.placeholder如果您正在使用@Blender指出的HTML5,则需要使用javascript来获取该OR 属性.

Answer 3

由于@Sarfraz已经提到过CSS,我只想添加HTML5.

您可以使用HTML5 placeholder属性:

<input type="text" placeholder="Placeholder text blah blah." />

Answer 4

如果内容是通过 ajax 加载的，请使用 javascript 来操作占位符。无论如何，每种 css 方法都是 hack-isch。例如使用 jQuery： $('#myFieldId').attr('placeholder', 'Search for Stuff');

Answer 5

某些类型的输入没有 :after 或 :before 伪元素，因此您可以使用带有 SVG 文本元素的背景图像：

    input {
       background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='gray' font-size='15'>Type Something...</text></svg>");
       background-repeat: no-repeat;
    }

    input:focus {
       background-image: none;
    }

我的代码笔：https ://codepen.io/Scario/pen/BaagbeZ

Answer 6

可以实现的另一种方法，并且还没有真正看到任何其他人将其作为选项，而是使用锚点作为输入和标签周围的容器，并通过一些颜色技巧处理标签的移除，#hashtag ，和 css a:visited。（底部的jsfiddle）

您的 HTML 将如下所示：

<a id="Trickory" href="#OnlyHappensOnce">
    <input type="text" value="" id="email1" class="inputfield_ui" />
    <label>Email address 1</label>
</a>

还有你的 CSS，像这样：

html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */

a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */

a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */

a#Trickory input {
    width:95%;
    z-index:3;
    position:relative;
    background-color:transparent;
}
a#Trickory label {
    position:absolute;
    pointer-events: none;
    display:block;
    top:3px;
    left:4px;
    z-index:1;
}

您可以在 jsfiddle 上看到这一点，请注意，此解决方案仅允许用户选择该字段一次，然后才能永久删除标签。也许不是您想要的解决方案，但绝对是我没有看到其他人提到的可用解决方案。如果您想多次试验，只需将#hashtag 更改为新的“未访问”标签即可。

http://jsfiddle.net/childerskc/M6R7K/