How to set placeholder value using CSS?
HtmlCssPlaceholderHtml Problem Overview
I want to set the placeholder value of an input box using only CSS and no JavaScript or jQuery.
How can I do this?
Html Solutions
Solution 1 - Html
You can do this for webkit:
#text2::-webkit-input-placeholder::before {
color:#666;
content:"Line 1\A Line 2\A Line 3\A";
}
Solution 2 - Html
AFAIK, you can't do it with CSS alone. CSS has content
rule but even that can be used to insert content before or after an element using pseudo selectors. You need to resort to javascript for that OR use placeholder
attribute if you are using HTML5 as pointed out by @Blender.
Solution 3 - Html
As @Sarfraz already mentioned CSS, I'll just add HTML5 to the mix.
You can use the HTML5 placeholder
attribute:
<input type="text" placeholder="Placeholder text blah blah." />
Solution 4 - Html
Some type of input hasn't got the :after or :before pseudo-element, so you can use a background-image with an SVG text element:
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;
}
My codepen: https://codepen.io/Scario/pen/BaagbeZ
Solution 5 - Html
If the content is loaded via ajax anyway, use javascript to manipulate the placeholder. Every css approach is hack-isch anyway.
E.g. with jQuery:
$('#myFieldId').attr('placeholder', 'Search for Stuff');
Solution 6 - Html
Another way this can be accomplished, and have not really seen any others give it as an option, is to instead use an anchor as a container around your input and label, and handle the removal of the label via some color trickory, the #hashtag, and the css a:visited. (jsfiddle at the bottom)
Your HTML would look like this:
<a id="Trickory" href="#OnlyHappensOnce">
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
</a>
And your CSS, something like this:
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;
}
You can see this working over at jsfiddle, note that this solution only allows the user to select the field once, before it removes the label for good. Maybe not the solution you want, but definitely an available solution out there that I have not seen others mention. If you want to experiment multiple times, just change your #hashtag to a new 'non-visited' tag.
Solution 7 - Html
From what I understand using,
::-webkit-input-placeholder::before
or ::-webkit-input-placeholder::after
,
to add more placeholder content doesn't work anymore. Think its a new Chrome update.
Really annoying as it was a great workaround, now im back to just adding lots of empty spaces between lines that I want in a placeholder. eg:
<input type="text" value="" id="email1" placeholder="I am on one line. I am on a second line etc etc..." />
Solution 8 - Html
I recently had to do this with google's search box, this is an extreme hack reserved for extreme situations (the resulting selector was slightly different, but I made it work in this example)
/*
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>
Solution 9 - Html
click on link to see placeholder with this code
it also is according to 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;
}
Solution 10 - Html
Try use:
.input_class:focus::placeholder{
color: transparent;
}
Solution 11 - Html
Change your meta tag to the one below and use placeholder attribute inside your HTML input tag.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<input type="text" placeholder="Placeholder text" />ā