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; }
:placeholder-show
is a CSS pseudo-class that allows you to apply styles toor ## that have placeholder text #
.
Must have placeholder
input:placeholder-shown { border-color: pink; }
::placeholder
Therefore, We can useto 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.
:empty
althoughis 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:
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
. 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; }
:not
we can usePseudo class to do the opposite. Here, we can perform target operations when the input is not empty. 结果: 使用占位符而不使用标签的问题之一就是无障碍,因为一旦你在打字的时候,占位符文字就没有了,这可能会导致用户的困惑。一个真正好的解决方案是浮动标签。最初,占位符文本显示时没有标签,而一旦用户开始输入,标签就会出现。这样一来,你仍然可以在不影响用户体验和可访问性的前提下,保持表单的简洁性。双赢 而这是可以用纯CSS实现的,我们只需要将 对 本文转载自: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!<input placeholder="placeholder" value="not empty" />
input:not(:placeholder) { border-color: green; }
浮动标签
placeholder-shown
与:not
和+
结合起来就可以了。这是一个超级简化版的浮动标签。
label { display: none; position: absolute; top: 0; } input:not(:placeholder-shown) + label { display: block; }
浏览器支持
:placeholder-shown
的支持非常好!这包括Internet Explorer(是的,我和你一样惊讶)。但是,对于IE,你需要使用非标准名称:-ms-input-placeholder
。