Is there a CSS selector that checks if an input has any text in it?

Question

Sorry if the title is not clear but I'm trying to make it so that when I type something into an input it changes the border color around it.

Right now I'm using the :focus selector but when I click off the input window the border changes back to its original color.

score 0 · Accepted Answer · answered Sep 12 '21 at 14:20

0

you can try this code

    input:not(:placeholder-shown) {
         border-color: green;
    }

answered Sep 12 '21 at 14:20

Jay varmora

83
1
2
8

A comment on this, if your element shouldn't have a placeholder text, you can use `placeholder=" "` (a one-space string) so it triggers the pseudoselector. If you have no placeholder or an empty string, it will consider it's never showing a placeholder and the trick won't work. – arieljuod Sep 12 '21 at 14:23

score -2 · Answer 2 · answered Sep 12 '21 at 14:25

-2

You can use the :valid selector:

The :valid selector allows you to select elements that contain valid content, as determined by its type attribute. :valid is defined in the CSS Selectors Level 3 spec as a “validity pseudo-selector”, meaning it is used to style interactive elements based on an evaluation of user input.

Example:

input:valid {
  background: blue;
}

<label>
  Name
  <input name="name" type="text" required>
</label>

answered Sep 12 '21 at 14:25

shamil carela

74
8

This would only work on that specific case of a text input that's required and happen to be valid with just 1 character. If you have a minlength, or a pattern, or the field is not required, this won't work – arieljuod Sep 12 '21 at 14:30
Obviously, you can modify the input and add the `pattern` attribute to adapt it to a more specific use, e.g. "[a-zA-Z]{20,}" for a min 20 char validation. On the other hand, it's correct, the input needs the `required` attribute for this selector to work. – shamil carela Sep 12 '21 at 14:41

Is there a CSS selector that checks if an input has any text in it?

2 Answers2