CSS pseudo-class: usage of placeholder-shown

This article focuses on "CSS pseudo-class: the use of placeholder-shown", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "CSS pseudo-class: the usage of placeholder-shown".

The CSS pseudo-class represents any form element that displays placeholder text.

To put it simply, what is the input box doing when the placeholder content of the input box is displayed.

Compatibility is as follows, there is no problem on the mobile side.

How does placeholder-show work?

: placeholder-shown CSS pseudo-class takes effect when or element displays placeholder text. To put it simply, placeholder takes effect only if it has a value, as shown below:

/ / html / / css input:placeholder-shown, textarea:placeholder-shown {border:1px solid pink;}

If placeholder is empty, placeholder-show has no effect:

/ / html

: placeholder-shown vs:: placeholder

We can style the input element with: placeholder-shown.

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

Pay attention to some strange problems?-We set color: green, but it doesn't work. This is because: placeholder-shown only targets input itself. For the actual placeholder text, you must use the pseudo element:: placeholder.

Input::placeholder {color: green;}

I have noticed that there are some other attributes that, if applied:: placeholder-shown, also affect the style of placeholder.

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

I don't know what this is, maybe it's because these properties are inherited by placeholder. If you know why, feel free to leave a message and let me know. Thank you.

: placeholder-shown vs: empty

Placeholder-shown is an object specifically used to determine whether an element displays a placeholder, and we mainly use it to check whether the input content is empty (assuming that all input have a placeholder). Here you may think, is it possible to use empty? Let's see.

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

Here it looks like empty works, because what we see is a pink border, but it doesn't actually work.

The pink color is displayed because pseudo-classes increase the weight of css. Similar to a class selector (I. e. Form-input) has a higher weight than a type selector (that is, input). The high permission selector will always override the style of the low weight setting.

So we can say this: don't use: empty to check whether the input element is empty.

What if I check if the input content is empty (without a dot)?

The only way we can check that the input is empty is to use: placeholder-shown. But what happens if our input element doesn't have a placeholder? Here is a trick: pass in an empty string "".

/ / html / / css input:placeholder-shown {border-color: pink;}

Combine other selectors

We can use: not pseudo-class to inverse something. Here, we can locate if the input is not empty.

/ / html / / css input:not (: placeholder-shown) {border: 1px solid green;}

Actual combat

With placeholder-shown, we can achieve the following dynamic effects

The specific code is as follows:

Html

Mailbox

Css

.input {position: relative;}. Input-fill {border: 1px solid # ececec; outline: none; padding: 13px 16px 13px; font-size: 16px; line-height: 1.5; width: fit-content; border-radius: 5px;} .input-fill:placeholder-shown::placeholder {color: transparent;}. Input-label {position: absolute; font-size: 16px; line-height: 1.5; left: 16px; top: 14px; color: # a2a9b6 Padding: 02px; transform-origin: 0; pointer-events: none; transition: all .25s;} .input-fill:focus {border: 1px solid # 2486ff;} .input-fill:not (: placeholder-shown) ~ .input-label, .input-fill:focus ~ .input-label {transform: scale (0.75) translate (0,-32px); background-color: # fff; color: # 2486ff } at this point, I believe you have a deeper understanding of "CSS pseudo-class: the use of placeholder-shown". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!