Как установить значение заполнителя с помощью CSS?

Question

Как установить значение заполнителя с помощью CSS?

Я хочу установить значение заполнителя для поля ввода, используя только css, а не JavaScript или jQuery. Как я могу это сделать?

43

html css

задан Rap 7 January 2014 в 19:23

2 ответа

Другие вопросы по тегам:

html css

Похожие вопросы:

score 15 · 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/

score 0 · Answer 2

Недавно мне пришлось сделать это с помощью окна поиска Google, это экстремальный хак, зарезервированный для экстремальных ситуаций (результирующий селектор немного отличался, но я заставил его работать в этом примере)

/*
 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"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>