search
HomeWeb Front-endCSS TutorialWhat 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.

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

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;
}

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

How does it work?

:placeholder-show is a CSS pseudo-class that allows you to apply styles to <input> or ## that have placeholder text #

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

Result:

    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

This selector will have no effect if the element has no placeholder text.

<input /><!-- 没有占位符 -->

<!-- 这也被视为没有占位符文本 -->
<input placeholder="" />
input:placeholder-shown {
  border-color: pink;
}

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

##:placeholder-shown vs ::placeholder Therefore, We can use

:placeholder-shown

to style the input element. <pre class='brush:php;toolbar:false;'>input:placeholder-shown { border: 1px solid pink; background: yellow; color: green; }</pre>

What is :placeholder-shown in CSS? how to work? What is the use?☝️Hmm... noticed something strange - we set the color to: green, but it didn't work. Well, that's because

:placeholder-shown

only targets the input itself. But for actual placeholder text, you must use the pseudo-element ::placeholder. <pre class='brush:php;toolbar:false;'>input::placeholder { color: green; }</pre>

What is :placeholder-shown in CSS? how to work? What is the use?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

:placeholder-shown

level. <pre class='brush:php;toolbar:false;'>input:placeholder-shown { font-style: italic; text-transform: uppercase; letter-spacing: 5px; }</pre>

What is :placeholder-shown in CSS? how to work? What is the use?Now, I don't really know why this happens, maybe it's because the properties are inherited by the placeholders.

:placeholder-shown vs :empty although

:placeholder-shown

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 <pre class='brush:php;toolbar:false;'>&lt;input value=&quot;not empty&quot;&gt; &lt;input&gt;&lt;!-- empty --&gt;</pre><pre class='brush:php;toolbar:false;'>input:empty { border: 1px solid pink; } input { border: 1px solid black; }</pre>

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

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

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

.form-input

) 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

:empty

to check if the input element is empty

How to check if the input is empty without placeholder?

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

:placeholder-shown

. But what happens if our input elements don't have placeholders? Well, that's a smart way! Pass in an empty string " ". <pre class='brush:php;toolbar:false;'>&lt;input placeholder=&quot; &quot;&gt;&lt;!-- 传递空字符串 --&gt;</pre><pre class='brush:php;toolbar:false;'>input:placeholder-shown { border-color: pink; }</pre>

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

Combined with other selectors

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.

Reverse

:placeholder-shown For :not we can use

:not

Pseudo class to do the opposite. Here, we can perform target operations when the input is not empty. <pre class='brush:php;toolbar:false;'>&lt;input placeholder=&quot;placeholder&quot; value=&quot;not empty&quot; /&gt;</pre><pre class='brush:php;toolbar:false;'>input:not(:placeholder) { border-color: green; }</pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/738/627/999/1625538639610588.gif?x-oss-process=image/resize,p_40" class="lazy" title="1625538639610588.gif" alt="What is :placeholder-shown in CSS? how to work? What is the use?"></p> <p>结果:</p> <ul> <li>绿色,如果不为空,则表示用户已经输入了一些内容。</li> <li>如果为空,则为黑色</li> </ul> <h3 id="strong-浮动标签-strong"><strong>浮动标签</strong></h3> <p>使用占位符而不使用标签的问题之一就是无障碍,因为一旦你在打字的时候,占位符文字就没有了,这可能会导致用户的困惑。一个真正好的解决方案是浮动标签。最初,占位符文本显示时没有标签,而一旦用户开始输入,标签就会出现。这样一来,你仍然可以在不影响用户体验和可访问性的前提下,保持表单的简洁性。双赢</p> <p>而这是可以用纯CSS实现的,我们只需要将 <code>placeholder-shown:not+ 结合起来就可以了。这是一个超级简化版的浮动标签。

<input name="name" placeholder="Type name..." />
<label for="name">NAME</label>
label {
  display: none;
  position: absolute;
  top: 0;
}

input:not(:placeholder-shown) + label {
  display: block;
}

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

浏览器支持

:placeholder-shown 的支持非常好!这包括Internet Explorer(是的,我和你一样惊讶)。但是,对于IE,你需要使用非标准名称 :-ms-input-placeholder

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

本文转载自:https://segmentfault.com/a/1190000039928413

作者:杜尼卜

更多编程相关知识,请访问:编程入门!!

The above is the detailed content of What is :placeholder-shown in CSS? how to work? What is the use?. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete
What is CSS Grid?What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

How can we make our website responsive using CSS?How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PM

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

What does the CSS box-sizing property do?What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PM

The article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.

How can we animate using CSS?How can we animate using CSS?Apr 30, 2025 pm 03:17 PM

Article discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.

Can we add 3D transformations to our project using CSS?Can we add 3D transformations to our project using CSS?Apr 30, 2025 pm 03:16 PM

Article discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)

How can we add gradients in CSS?How can we add gradients in CSS?Apr 30, 2025 pm 03:15 PM

The article discusses using CSS gradients (linear, radial, repeating) to enhance website visuals, adding depth, focus, and modern aesthetics.

What are pseudo-elements in CSS?What are pseudo-elements in CSS?Apr 30, 2025 pm 03:14 PM

Article discusses pseudo-elements in CSS, their use in enhancing HTML styling, and differences from pseudo-classes. Provides practical examples.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment