Input placeholder using CSS only

Question

I know there are lot's of questions regarding this query here but none of them provide the solution for me.

HTML

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

<br>

<p class="note1"> This is not done.</p>

CSS

p.note1:before{
    content: "Note:";
}

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

I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag.

EDIT: I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system.

EDIT2: Forget about my css, is there any way that placeholder text is possible without using placeholder attribute and just with plain css for input type="text"

Answer 1

It doesn't work for the simple fact that this:

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

is not valid. <input /> elements are not containers. As the spec notes, endtags are forbidden (and essentially ignored by the browser): http://www.w3.org/TR/html401/interact/forms.html#h-17.4

Answer 2

: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 element.

If you can't edit your HTML code manually, you're still able to that by using JavaScript:

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

Update

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 do. You'll not able to check the value of <input> by CSS. If you write something inside the <input>, after blur event, the generated placeholder will be displayed over the <input> again.

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

Answer 3

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');

Answer 4

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

Answer 5

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.

Answer 6

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/