Apply different styles to input text field when empty (using CSS)?

Question

For instance, a freshly loaded form contains an <input type="text"> which has a green background colour. Once the user enters a value into the field, I would like it to be coloured blue instead.

Is it possible to accomplish this purely using CSS? I understand there is the input[type='text'][value] selector. However, this does not reflect any changes to the form made by the user after it has finished loading, so if the form loaded with no value, it would remain unchanged regardless of what the user does.

Rudie · Accepted Answer · 2012-01-01 19:50:03Z

12

You could give the textfield the required attribute:

<input type="text" required />

and then check for validity with CSS:

input:invalid { background: green; }

or the opposite (only different for old browsers):

input:valid { background: blue; }

answered Jan 1, 2012 at 19:50

Rudie

54.2k42 gold badges137 silver badges176 bronze badges

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

4 Comments

BoltClock Over a year ago

If you're writing in XML syntax, you'll want to expand that attribute to required="required"...

vsync Over a year ago

why would I want to force the required attribute just for that? this is not a good solution

Rudie Over a year ago

@vsync If the field isn't required, I agree. For purely styling, it's not a good solution. If the field is required, it is.

vsync Over a year ago

also the input's type has to be "text" or else probably this won't work as intended

Josh Smith · Accepted Answer · 2011-12-29 15:06:58Z

1

You can only do this using JavaScript. Here's an example that uses jQuery.

If you want to change the background-color on focus only, you can use the aptly named :focus pseudo-selector. Here's an example of this.

answered Dec 29, 2011 at 15:06

Josh Smith

15.1k19 gold badges74 silver badges126 bronze badges

2 Comments

Alkenrinnstet Over a year ago

Ah well, I was hoping to keep appearance confined to stylesheets. Thanks for the script, and the js tool.

Josh Smith Over a year ago

Sure. :focus is a decent pseudo-selector that will do much of what you want, but we're used to so much customization now that relies heavily on JS. C'est la vie.

iSafa · Accepted Answer · 2021-04-05 10:34:39Z

1

This is possible by using CSS only.

  input:placeholder-shown{
    background:#cacaca;
  }

More details here.

edited Apr 5, 2021 at 10:34

answered Apr 5, 2021 at 9:52

iSafa

1851 silver badge8 bronze badges

Collectives™ on Stack Overflow

Apply different styles to input text field when empty (using CSS)?

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related