CSS :placeholder-shown

Um dos primeiros plug-ins que chegava a uma nova estrutura nos primeiros dias das estruturas JavaScript era um plug-in de espaço reservado, e é por isso que ficamos tão empolgados quando o HTML5 nos trouxe o placeholder . Depois, os amantes de CSS, como eu, ficaram entusiasmados quando o CSS spec nos permitiu estilizar placeholders.

Um problema recente que enfrentei foi querer aplicar um font-family específico a um <input> mas somente quando esse elemento contivesse texto. Minha ideia inicial era a necessidade de definir o font-family no elemento <input> e, em seguida, reaplicar o font-family do corpo no ::placeholder mas isso não parecia ideal, parecia um custo de manutenção.

I levou para o Twitter em busca de uma solução melhor e, felizmente, o Facundo Corradini forneceu-o: :placeholder-shown. Os :placeholder-shown pseudo-clas tem como alvo um <input> somente quando ele é exibido e, portanto, eu poderia selecionar apenas o espaço reservado, mas não o texto do 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 é um pseudo-seletor incrível que pode ser usado para estilizar com mais eficiência os placeholders e seus elementos, dependendo do estado. Criatividade não é apenas um termo de design – é uma forma de pensar para que os desenvolvedores resolvam problemas interessantes!