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

Ответ 1

Вы можете сделать это для webkit:

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

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

Ответ 2

AFAIK, вы не можете сделать это только с помощью CSS. CSS имеет правило content, но даже это может быть использовано для вставки содержимого до или после элемента с использованием псевдоселекторов. Вам нужно прибегнуть к javascript для этого ИЛИ использовать атрибут placeholder, если вы используете HTML5, как указано @Blender.

Ответ 3

Поскольку @Sarfraz уже упоминал CSS, я просто добавлю HTML5 в микс.

Вы можете использовать атрибут HTML5 placeholder:

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

Ответ 4

Еще один способ, которым это может быть достигнуто, и на самом деле не видел, чтобы другие предоставляли его как вариант, - вместо этого использовать якорь в качестве контейнера вокруг вашего ввода и метки и обрабатывать удаление метки с помощью какого-то цвета trickory, #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;
    display:block;
    top:3px;
    left:4px;
    z-index:1;
}

Вы можете увидеть это, работая над jsfiddle, обратите внимание, что это решение позволяет пользователю выбирать поле один раз, прежде чем оно удалит ярлык навсегда. Возможно, это не решение, которое вы хотите, но, безусловно, доступное решение, которое я не видел других. Если вы хотите поэкспериментировать несколько раз, просто измените свой #hashtag на новый тег "не посещаемый".

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

Ответ 5

Из того, что я понимаю,

::-webkit-input-placeholder::before или ::-webkit-input-placeholder::after,

чтобы добавить больше содержимого заполнителя, больше не работает. Подумайте о новом обновлении Chrome.

На самом деле это раздражало, так как это было отличное решение, теперь вернемся к простому добавлению большого количества пустых пространств между строками, которые я хочу в placeholder. например:

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

Ответ 6

Если содержимое загружается через ajax в любом случае, используйте javascript для манипулирования заполнителем. В любом случае, любой подход css - это хак-иш. Например. с jQuery: $('#myFieldId').attr('placeholder', 'Search for Stuff');

Ответ 7

Недавно мне пришлось делать это с помощью окна поиска 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>

Ответ 8

Измените свой метатег на приведенный ниже и используйте атрибут placeholder внутри тега ввода HTML.

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