Detailed explanation of:placeholder-shown pseudo-class in CSS

(Learning video sharing: css video tutorial)

Generally we commonly see placeholder pseudo-class selector is used to modify the default Style and copywriting, I suddenly discovered the placeholder-shown pseudo-class selector. The more official explanation is that the

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

To put it simply, when the placeholder content of the input box is displayed, what does the input box do?

Compatibility is as follows, there is no problem on mobile terminal

How does placeholder-show work?

:placeholder-shown CSS pseudo-class takes effect when the <input> or <textarea></textarea> element displays placeholder text, simply It means that placeholder will only take effect if it has a value, as shown below:

// html
<input placeholder="placeholder text" />
<textarea placeholder="placeholder text"></textarea>

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

##If

placeholder is emptyplaceholder-show has no effect:

// html
<input placeholder="" />
<textarea placeholder=" text"></textarea>

:placeholder-shown vs ::placeholder

We can use

:placeholder-shownSet the style of the input element.

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

Note some weird issues - we set

color: green, but it has no effect. This is because :placeholder-shown will only target the input itself. For actual placeholder text, the pseudo-element ::placeholder must be used.

input::placeholder {
  color: green;
}

I noticed that there are some other properties that will also be affected if

::placeholder-shown is applied ## The style of #placeholder. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">input:placeholder-shown, textarea:placeholder-shown{ font-style: italic; text-transform: uppercase; letter-spacing: 5px; }</pre><div class="contentsignin">Copy after login</div></div>

I don’t know what this is, maybe it’s because these attributes are

placeholder

Inherited, if you know the reason, please leave a message and tell me, thank you. :placeholder-shown vs :empty

:placeholder-shown

is an object specifically used to determine whether an element displays a placeholder. We mainly use it to checkinput Whether the content is empty (assuming that all input has a placeholder). You may be thinking here, is it okay to use empty? Let's take a look. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">// html &lt;input value=&quot;not empty&quot;&gt; &lt;input&gt;&lt;!-- empty --&gt; // css input:empty { border: 1px solid pink; } input { border: 1px solid black; }</pre><div class="contentsignin">Copy after login</div></div>

It looks like

empty

works here because we see a pink border, but this actually Doesn't workThe reason why it displays pink is because the pseudo class increases the weight of the css. Similar to class selectors (i.e.

.form-input

) having higher weight than type selectors (i.e. input). High authority selectors will always override styles set by low authority. So we can say this: Don't use

:empty

to check if the input element is empty. How to check whether the input content is empty (without dot markers)?

The only way we can check if the input is empty is to use

:placeholder-shown

. But what happens if our input element has no placeholder? Here's a trick: pass in an empty string " ". <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">// html &lt;input placeholder=&quot; &quot;&gt;&lt;!-- pass empty string --&gt; //css input:placeholder-shown { border-color: pink; }</pre><div class="contentsignin">Copy after login</div></div>

Combining other selectors

We can use the

:not

pseudo-class to select certain things Inverse operation. Here we can position if the input is not empty. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">//html &lt;input placeholder=&quot;placeholder&quot; value=&quot;not empty&quot; /&gt; // css input:not(:placeholder-shown) { border: 1px solid green; }</pre><div class="contentsignin">Copy after login</div></div>Practical combat

Using

placeholder-shown

we can achieve the following animation

# #The specific code is as follows:

Html

<div class="input">
    <input class="input-fill" placeholder="邮箱">
    <label class="input-label">邮箱</label>
</div>

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: 0 2px;
  transform-origin: 0 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;
}

Original address: https://www .samanthaming.com/tidbits/88-css-placeholder-shown/

Author: Samantha Ming

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Detailed explanation of:placeholder-shown pseudo-class in CSS. For more information, please follow other related articles on the PHP Chinese website!