Update - Mar-24-2016
I wanted to generalize the concerns but looks like it has been comprehended to be specific, my bad. This answer is is 100% solution to the example I used earlier.
Please refer this CodePen
So the idea behind Style empty textbox, was
textbox:empty ~ label {
// position it as floating label
}
Looks like it is not possible in CSS right now, may be in future.
Thank you every one for your help.
Update - Mar-23-2016
This answer is close.
But using :invalid is not an option, as it makes the field mandatory with required=true attribute.
Please refer this CodePen for the desired behavior, with javascript.The demo is for the sake of explaining, how it should behave, using javascript is not the intended behavior. Also the color used is just for the sake of contrast, is has nothing to do with validation
Is there any way to style an empty textbox with CSS only?
I tried :empty pseudo-class, unfortunately textbox is always detected as empty; as it has no children or text-node. To be precise, textbox is a self-closing tag.
The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.
Any pointer would be helpful.