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"

Rotatory

What's wrong with using placeholder="text here" – Griefstricken

can't add because of system limitations... – Rotatory

What is limiting you from using plain HTML? – Griefstricken

:before only works on elements that can have child nodes, also inputs don't have a closing tag – Paripinnate

html is rendered from existing framework controls and I do not have control to ask/change this. – Rotatory

are you looking for placeholder text inside the text box or outside the textbox – Dragline

inside text box; please see my edit2 – Rotatory

jsfiddle.net/qcNFF – Janeejaneen

pure css, use #16953026 for code above – Watertight

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

Danais

I got this part then how it will be possible to render placeholder text on my input field with css only. – Rotatory

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

Clamant

Thanks for your reply, but it needs to be done using css only...is there any way to leverage css for that matter. – Rotatory

@Rotatory It depends on your HTML markup, you should have a container element like <label>. Check my update. – Clamant

I like it, however, when tb1 loses the focus, the placeholder comes back even if you have put some text in it. – Look

Javascript is honestly the most reliable (albeit hacky) method I've found, when I can't edit the HTML directly. – Procaine

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

Cosgrave

Answer 4

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.

Verst

Answer 5

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

Dragline

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/

Breezeway