The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.

You can also use it with text-overflow: ellipse

Usage:

input:placeholder-shown {
  border: 1px solid red;
  text-overflow: ellipsis;
}

Demo:

Browser support:

Can I Use css-placeholder-shown? Data on support for the css-placeholder-shown feature across the major browsers from caniuse.com.

👇 Please leave your comment if you like this.👇