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规则，但即便如此，也可以使用伪选择器在元素之前或之后插入内容。如果您正在使用@Blender指出的HTML5，则需要使用javascript来使用placeholder属性。

Answer 3

由于@Sarfraz已经提到过CSS，我只会添加HTML5。

您可以使用HTML5 placeholder属性：

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

Answer 4

另一种可以实现的方法，并没有真正看到任何其他人提供它作为选项，而是使用锚作为输入和标签周围的容器，并通过一些颜色技巧处理标签的删除， #hashtag和css a：访问过。（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;
    display:block;
    top:3px;
    left:4px;
    z-index:1;
}

你可以在jsfiddle看到这个工作，注意这个解决方案只允许用户在删除标签之前选择一次字段。也许不是你想要的解决方案，但绝对是一个我没有看到别人提到的可用解决方案。如果您想多次试验，只需将您的#hashtag更改为新的“未访问”状态。标签

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

Answer 5

据我所知，

::-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..." />

Answer 6

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

Answer 7

我最近不得不使用google的搜索框执行此操作，这是针对极端情况保留的极端黑客（结果选择器略有不同，但我在此示例中使其工作）

＆＃13;

/*
 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+"')";

＆＃13;

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

＆＃13;

As SVG <svg id="placeholder"xmlns="http://www.w3.org/2000/svg"width="235"height="13"><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>

＆＃13;

Answer 8

某些类型的 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;
    }

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

Answer 9

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

BinaryFormatter

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

9 个答案: