Target element with non-empty attribute

Question

I want to style my input field but somehow I have to detect if this input has placeholder attribute and if is actually filled. I would like to avoid JS stuff to do it, so my question is: Is there any css trick so i can target this specific selector?

Currently i have:

<input type="text" placeholder="">

input[placeholder] {
 // my styles
}

but this applies styles anyway. Thanks for your help.

AmmarCSE · Accepted Answer · 2015-06-15 16:01:17Z

4

You can use the :not() selector like

[placeholder]:not([placeholder=""]) {
  background: green;
}

<input type="text" placeholder="">

<input type="text" placeholder="test">

edited Jun 15, 2015 at 16:01

answered Jun 15, 2015 at 16:00

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

1 Comment

Indy Over a year ago

How the.. I didn't thought about :not() selector. Thank you sir :)

Collectives™ on Stack Overflow

Target element with non-empty attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related