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.

Improve this question
5
  • Have you tried playing with active and focus? Commented Mar 24, 2016 at 1:22
  • 1
    The focus attribute is close, but not exactly what you want ---> w3schools.com/cssref/tryit.asp?filename=trycss_sel_focus Commented Mar 24, 2016 at 1:24
  • @Matthew I dont think, active and focus tells you if the the field is empty or not Commented Mar 24, 2016 at 1: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 stackoverflow.com/questions/16952526/… Commented Mar 24, 2016 at 1:28
  • jsfiddle.net/en3Lxtsn is really the closest you're going to get with pure CSS Commented Mar 24, 2016 at 1:30

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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 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.
@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 No problem. So using Javascript is what you have decided on then?
@GerardSexton may be will just drop the plan, don't want to rely on javascript.
0

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

Improve this answer

1 Comment

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!
0

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

enter image description here

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.