5

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.

enter image description here

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.

empty and non empty state's style

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.

Community
  • 1
  • 1
Sarbbottam
  • 5,410
  • 4
  • 30
  • 41
  • Have you tried playing with active and focus? – Matthew Mar 24 '16 at 01:22
  • 1
    The **focus** attribute is close, but not exactly what you want ---> **http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_focus** – Arif Burhan Mar 24 '16 at 01:24
  • @Matthew I dont think, `active` and `focus` tells you if the the field is empty or not – Sarbbottam Mar 24 '16 at 01:24
  • I don't believe CSS has any way of telling whether or not an input box is empty, but you can get incredibly close with active and focus. Here's a similar question any way http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css – Matthew Mar 24 '16 at 01:28
  • https://jsfiddle.net/en3Lxtsn/ is really the closest you're going to get with pure CSS – Matthew Mar 24 '16 at 01:30

3 Answers3

4

This can be achieved with the use of :invalid and setting the input to required="true"

input { 
  padding: 10px;
  background-color:red; 
}
input:invalid {
  background-color:lightblue;
}
<input id="in1" required="true">

MDN :invalid

Gerard Sexton
  • 3,114
  • 27
  • 36
  • I was thinking about :invalid, but then you're forced to use this input - it's not bad if this field must have a value, but what if it's actually not required? I guess it is the only way. – Matthew Mar 24 '16 at 01:45
  • @Matthew I think the required attributes are enforced in javascript, so if he doesn't use the required semantics already, then he can just continue to ignore them. – Gerard Sexton Mar 24 '16 at 01:55
  • @GerardSexton Thanks, I thought about it, the only problem is that it will not scale with optional fields, the form can not be submitted with out filling in the corresponding fields. – Sarbbottam Mar 24 '16 at 03:36
  • @sarbbottam No problem. So using Javascript is what you have decided on then? – Gerard Sexton Mar 24 '16 at 03:46
  • @GerardSexton may be will just drop the plan, don't want to rely on javascript. – Sarbbottam Mar 24 '16 at 03:48
0

It's possible to use the ::placeholder pseudo-element, like this: http://codepen.io/thierry/pen/oxWMwy

Thierry Koblentz
  • 36
  • 3
  • awesome, learnt this `placeholder` trick, your solution is perfect to the example I posted. But the actual intent has been different, I have updated the post. Thanks! – Sarbbottam Mar 25 '16 at 00:25
0

It is not possible to have a css only solution (as of now) for the updated post.

enter image description here

Sarbbottam
  • 5,410
  • 4
  • 30
  • 41