Input placeholder using CSS only

From MDN:

::before creates a pseudo-element that is the first child of the element matched.

The selected element must be a container tag. An empty tag like <input> doesn't have any children elements.

If you want to achieve this by using CSS only, you need to have a container element wrapping your <input> (or come after it).

BUT It doesn't work correctly as placeholder does. You'll not be able to check the value of <input> using CSS. If you write something inside the <input>, after a blur event, the generated placeholder will be displayed again over the <input>.

HTML:

<label>
    <input id="tb1" type="text" class="note">
</label>

CSS:

label {
  position: relative;
}

label::after {
  content: 'Enter your number';
  position: absolute;
  left: 5px;
  top: 0;
  color: #bbb;
}

#tb1 {
  position: relative;
}

#tb1:focus {
  z-index: 10;
}

JSBin Demo

For JavaScript, if you can't edit your HTML code manually, you could still do that by using JavaScript:

document.getElementById("tb1").setAttribute("placeholder", "Enter your number");

If you cant manipulate the html and use placeholder="". Use javascript to manipulate the placeholder. Every css approach is hack-isch anyway. E.g. with jQuery: $('#myFieldId').attr('placeholder', 'Search for Stuff');

I have found this method but not supported by all browsers:

#tb1.note:empty:before{
    content: "Enter your number";
}

Note: you have forgot to place an id selector # tb1.note

see this link

EDIT:

Try this for starters: (Note: you'll need some js to detect if text has been entered in the input)

Apart from this - I don't think this there is a css solution for placeholder text on an input element without using the placeholder attribute.

FIDDLE

Markup

<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>

css

.container
{
    position: relative;
}
input
{
    background: transparent;
}
input:focus + .fakePlaceholder
{
    display: none;
}
.fakePlaceholder
{
    color:gray;
    position:absolute;
    top: 3px;
    left: 5px;
    z-index: -1;
}

You can't use pseudo elements on an input tag - or any other non-container elements for that matter

From the Pseudo-Elements tag info:

you cannot use them (pseudo elements) with replaced elements (see below) which do not have actual content. This is because the generated content resides within the element.
...

Replaced Elements

Any element whose appearance and/or dimensions are determined by some external resource is considered to be a replaced element. Some pseudo-elements cannot be applied to replaced elements because they have no "content" or get replaced with something (such as user interface controls). Replaced elements include images (<img>), inline frames (<iframe>), line breaks (<br>), horizontal rules (<hr>), plugins (<object>), form elements (<button>, <textarea>, <input>, and <select>), videos (<video>), audio sounds (<audio>), and canvases (<canvas>). Any other element is considered to be a non-replaced element.

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

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