css占位符_CSS：占位符显示

css占位符

One of the first plugins that would hit a new framework in the early days of JavaScript frameworks was a placeholder plugin, which is why we were so excited when HTML5 brought us the placeholder attribute. Then CSS lovers like me were thrilled when the CSS spec allowed us to style placeholders.

占位符插件是最早在JavaScript框架中流行到新框架的第一个插件，这就是为什么当HTML5为我们带来placeholder属性时我们如此兴奋的原因。 然后当CSS规范允许我们设置占位符样式时，像我这样CSS爱好者感到非常兴奋。

One recent problem I faced was wanting to apply a specific font-family to an <input> element but only when that element contained text. My initial thought was needing to set the font-family on the <input> and then re-apply the body's font-family on the ::placeholder but that didn't seem ideal -- it seemed like a maintenance cost.

我最近遇到的一个问题是想将特定的font-family应用于<input>元素，但仅当该元素包含文本时才适用。 我最初的想法是需要在<input>上设置font-family ，然后在::placeholder上重新应用正文的font-family ，但这似乎并不理想-这似乎是维护成本。

I took to Twitter for a better solution and luckily Facundo Corradini provided it: :placeholder-shown. The :placeholder-shown pseudo-clas targets an <input> element's placeholder only when it's shown, and thus I could select just the placeholder but not the input's text:

我上Twitter寻求更好的解决方案，幸运的是Facundo Corradini提供了它:placeholder-shown 。 :placeholder-shown伪类仅在显示<input>元素的占位符时才针对它，因此我可以只选择占位符，而不选择输入的文本：

/* Applying style to input applies to both input text and placeholder */
input { color: red; }

/* Applying style *just* to placeholder */
input::placeholder { color: blue; }

/* Applying style to input when placeholder is shown */
input:placeholder-shown { color: yellow; }

/* Applying style to input but *not* placeholder */
input:not(:placeholder-shown) { color: green; }

:placeholder-shown is an awesome pseudo-selector that can be used to more effectively style placeholders and their elements depending on state. Creativity isn't just a design term -- it's a way of thinking for developers to solve interesting problems!

:placeholder-shown是一个很棒的伪选择器，可用于根据状态更有效地设置占位符及其元素的样式。 创造力不仅仅是一个设计术语，它是开发人员解决有趣问题的一种思维方式！

翻译自: https://davidwalsh.name/placeholder-shown

css占位符