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

Posted 2023-03-05

【中文标题】如何使用 CSS 设置占位符值？

【英文标题】：How to set placeholder value using CSS?

【发布时间】：2011-12-25 22:25:36

【问题描述】：

我想只使用 CSS 而没有 javascript 或 jQuery 来设置输入框的占位符值。

我该怎么做？

【参考方案1】：

你可以为 webkit 做这个：

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

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

【讨论】：

我注意到这不再适用于 Chrome。似乎是一个不再有效的不受支持的功能。我曾经利用过这种技术，并且可以看到它不再应用于我的实现中。有没有其他人注意到这一点？

不适用于 Firefox 84.0.2

Firefox 不是基于 WebKit，@Mat

【参考方案2】：

AFAIK，你不能单独使用 CSS。 CSS 有 content 规则，但即便如此，它也可用于使用伪选择器在元素之前或之后插入内容。如果您使用的是@Blender 指出的 html5，则需要使用 javascript 或使用 placeholder 属性。

【参考方案3】：

正如@Sarfraz 已经提到的 CSS，我将添加 HTML5。

您可以使用 HTML5 placeholder 属性：

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

【讨论】：

输入文本框正在动态加载（谷歌自定义搜索输入框）。

在 jQuery 中：$('#myFieldId').attr('placeholder', 'Search for Stuff');

在我的情况下这不起作用，因为我正在尝试使用默认占位符值制作一个 css 模块

【参考方案4】：

某些类型的 input 没有 :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

【讨论】：

谢谢！这是一种非常聪明的做法。

【参考方案5】：

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

【讨论】：

被否决了，因为它与问题无关。问题提到“使用 CSS”。

这就是为什么我写了“无论如何每个 css 方法都是 hack-isch”，也就是“不要这样做”。但仍然想提供一种方法来作为站点注释。

【参考方案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/

【参考方案7】：

据我了解，

::-webkit-input-placeholder::before或::-webkit-input-placeholder::after，

添加更多占位符内容不再起作用。 认为它是一个新的 Chrome 更新。

真的很烦人，因为这是一个很好的解决方法，现在我回到只是在占位符中添加大量我想要的行之间的空格。 例如：

<input type="text" value="" id="email1" placeholder="I am on one line.                                              I am on a second line                                                                                     etc etc..." />

【讨论】：

是的，这是因为 chrome 停止使用 -WebKit

【参考方案8】：

我最近不得不用 google 的搜索框来做这个，这是一个为极端情况保留的极端 hack（生成的选择器略有不同，但我在这个例子中使它工作）

/*
 this is just used to calculate the resulting svg data url and need not be included in the final page
*/

var text = placeholder.outerHTML;
 var url = "data:image/svg+xml;,"+text.replace(/id="placeholder"/g," ").replace(/\n|([ ] )/g,"");//.replace(/" /g,"\"");
img.src = url;
result.value = url;
overlay.style.backgroundImage = "url('"+url+"')";

svg,img
  border: 3px dashed black;

textarea
width:50%;
height:300px;
vertical-align: top;

.wrapper
  position: relative;
  display: inline-block;

#overlay
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center left;

#my_input:focus + #overlay
  display: none;

As SVG <svg id="placeholder"xmlns="http://www.w3.org/2000/svg"><text x="0"y="10"font-family="Verdana"font-size="12" fill ="green">Some New Rad Placeholder</text></svg>
<br>
As IMG <img id="img">
<br>
As Data URI <textarea id="result"></textarea><br>

As "Placeholder" <div class="wrapper">
  <input id="my_input" />
  <div id="overlay">
</div>

【参考方案9】：

click on link to see placeholder with this code

---

也是根据this answer:

---

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 Email...</text></svg>");
              background-repeat: no-repeat;
           

---

input:focus
                  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'></text></svg>");
                  background-repeat: no-repeat;
                

【参考方案10】：

尝试使用：

.input_class:focus::placeholder
    color: transparent;

【讨论】：

关闭，但这不会像问题所要求的那样设置占位符值。此外，提供additional context 说明此答案的工作原理和方式以及何时使用，将提高其对读者的长期价值。

【参考方案11】：

将您的元标记更改为下面的标记，并在您的 HTML 输入标记中使用占位符属性。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<input type="text" placeholder="Placeholder text" />​