CSS only input placeholder

Question

I know that there are many questions in this matter, but none of them gives me a solution.

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 to use the above code and variation found on the Internet, but none of them work for the input tag. It works for tag p.

EDIT: I cannot add the value attribute to enter the tag and control css to get the desired result. This is a limitation of the system.

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

Answer 1

This does not work for the simple fact that it is:

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

not valid. The <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, which is the first child of the associated element.

The selected item MUST be a container tag. An empty tag such as <input> does not have a child element.

If you cannot edit your HTML code manually, you can still use this with JavaScript:

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

Update

If you want to achieve this only with CSS, you need the container element to wrap your <input> (or come after it).

BUT This does not work correctly as a placeholder . You cannot check the value of <input> with CSS. If you write something inside the <input> , after the blur event, the generated placeholder will be displayed on top of 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

EDIT:

Try this for starters: ( Note: you will need some js to determine if input text has been entered)

Other than that - I don't think this 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 not use the pseudo-tag input , or any other non-container elements, if this is important

From pseudo-element tag information :

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

Substituted Items

Any element whose appearance and / or dimensions are determined by some external resource is considered a replaced element. Some pseudo-elements cannot be applied to replaced elements, because they do not have “content” or are replaced by something (for example, a user interface control). Replaced elements include images ( <img> ), inline frames ( <iframe> ), line breaks ( <br> ), horizontal rules ( <hr> ), plugins ( <object> ), form elements ( <button> , <textarea> , <input> and <select> ), video ( <video> ), audio sounds ( <audio> ) and canvases ( <canvas> ). Any other element is considered not to be replaced by an element.

Answer 4

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

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

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

see this link

Answer 5

Another way this can be achieved, and have not really seen others provide it as an option, is to use the anchor as a container around your input and label instead and handle the label deletion using some kind of trickory color, # hashtag and css a: visited. (jsfiddle below)

Your HTML will 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 while working on jsfiddle, note that this solution allows the user to select a field once before it removes the shortcut permanently. Perhaps this is not the solution you want, but certainly an affordable solution that I have not seen others. If you want to experiment a few times, just change your #hashtag to a new "unvisited" tag.

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

Answer 6

If you cannot manipulate html and use placeholder="" . Use javascript to manipulate the placeholder. Anyway, any css approach is a hack-ish. For instance. with jQuery: $('#myFieldId').attr('placeholder', 'Search for Stuff');