What is :placeholder-shown in CSS? how to work? What is the use?

CSS :placeholder-shown pseudo-class is an object specifically used to determine whether an element displays a placeholder. It is mainly used to check whether the input content is empty. This article will take you through: placeholder-shown pseudo-class and introduce in detail how it works.

Use this pseudo-class to style an input that is currently displaying placeholder text, in other words, the user is not typing anything in the text box

It would be nice to apply some dynamic styling depending on whether your input is empty or not

input:placeholder-shown { border-color: pink; }

How does it work?

:placeholder-showis a CSS pseudo-class that allows you to apply styles toor ## that have placeholder text #<code>. </code><pre class="brush:html;toolbar:false;"><input placeholder="placeholder text" /> <textarea placeholder="placeholder text">

If the placeholder is shown, it is pink, indicating that the user did not enter anything
• If no placeholder is shown, it is black, indicating that the user has typed

:placeholder-showdMust have placeholder

input:placeholder-shown { border-color: pink; }

##:placeholder-shownvs::placeholderTherefore, We can use

to style the input element.

input:placeholder-shown { border: 1px solid pink; background: yellow; color: green; }

☝️Hmm... noticed something strange - we set the color to: green, but it didn't work. Well, that's because

only targets the input itself. But for actual placeholder text, you must use the pseudo-element::placeholder.

input::placeholder { color: green; }

But! While I was working on this issue, I noticed that there are a few other properties that would affect the placeholder text if applied at the

level.

input:placeholder-shown { font-style: italic; text-transform: uppercase; letter-spacing: 5px; }

Now, I don't really know why this happens, maybe it's because the properties are inherited by the placeholders.

:placeholder-shownvs:emptyalthough

is specifically Used to determine whether an element displays placeholders. In fact, we can use this to check if the input is empty (assuming, of course, that all inputs have a placeholder). So maybe your next question is, can't we use CSS empty? Ok let's check

<input value="not empty"> <input><!-- empty -->

input:empty { border: 1px solid pink; } input { border: 1px solid black; }

Expecting:

• If not Empty is black
• Hmm...from here on, you might think that

seems to be working, since what we see is a pink border. But this doesn't actually workThe reason it's shown in pink is because pseudo-classes add specificity, similar to how class selectors (i.e.

) are better than type selectors ( i.e.input) has higher specificity. High-specificity selectors will always override styles set by low-specificity.This is the verdict! Don't use

to check if the input element is empty

Okay, so the only way we can check if the input is empty is to use

. But what happens if our input elements don't have placeholders? Well, that's a smart way! Pass in an empty string" ".

<input placeholder=" "><!-- 传递空字符串 -->

input:placeholder-shown { border-color: pink; }

So, we can target input elements that display placeholder text, which is cool . In other words, if placeholder text is displayed, it must mean that the element is empty. Using this knowledge, we can combine this pseudo-class with other selectors and do some really neat things! let's see.

:placeholder-shownFor:notwe can use

Pseudo class to do the opposite. Here, we can perform target operations when the input is not empty.

<input placeholder="placeholder" value="not empty" />

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

 NAME

label { display: none; position: absolute; top: 0; } input:not(:placeholder-shown) + label { display: block; }