Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
:placeholder-shown

4 Articles
{
,

}
Direct link to the article Detecting Specific Text Input with HTML and CSS
:not :placeholder-shown :valid form validation forms

Detecting Specific Text Input with HTML and CSS

Direct Link

Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:

  1. You have to press a special combination of keys on a keyboard.
  2. Then type a secret password.

From there, a special message pops …

Avatar of Chris Coyier
Shared by Chris Coyier on Nov 9, 2021
:invalid :not :placeholder-shown :valid focus

Form Validation Styling on Input Focus

/* Only show invalid ring while not focused */
input:not(:focus):not(:placeholder-shown):invalid {
  border-color: var(--color-invalid);
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
  display: block;	
}

/* Only show valid ring while not focused and if a value is entered */
/* :empty won't work 
…
Avatar of Geoff Graham
Geoff Graham on Mar 8, 2021
Direct link to the article Show Search Button when Search Field is Non-Empty
:placeholder-shown

Show Search Button when Search Field is Non-Empty

I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input (<input placeholder="..."/>) when that placeholder is present. Meaning, the input does not yet have any value. You might think input[value]…

Avatar of Chris Coyier
Chris Coyier on Nov 5, 2019
Direct link to the article CSS Only Floated Labels with :placeholder-shown pseudo class
:placeholder-shown forms labels

CSS Only Floated Labels with :placeholder-shown pseudo class

Direct Link

The floated label technique has been around for a good long while and the general idea is this: we have an text input with the placeholder attribute acting as a label. When a user types into that input, the label …

Avatar of Robin Rendle
Shared by Robin Rendle on Oct 4, 2018

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top