placeholder-shown pseudo-class
The placeholder-shown pseudo-class
specifies the style of the input or textarea
that displays the so-called hint text
that disappears after you start typing.
Syntax
selector:placeholder-shown {}
Example
Let's set a red border for the input, which displays a hint text, and after entering it, let the border be repainted green:
<form>
<input placeholder="enter the text">
</form>
input {
border: 1px solid green;
}
input:placeholder-shown {
border-color: red;
}
:
See also
-
the
:defaultpseudo-class
that sets a default style for elements -
the
:indeterminatepseudo-class
that styles switches that are in an indeterminate state -
the
:optionalpseudo-class
that sets a style for the input that does not have a required attribute -
the
:read-onlypseudo-class
that sets a style for inputs that cannot be changed -
the
:requiredpseudo-class
that sets a style of the input that has the required attribute set -
the
:focus-withinpseudo-class
that styles the elements in focus -
the
caret-colorproperty
that sets a color of the text cursor in input