: platshållare visas - CSS-tricks

Anonim

Den :placeholder-shownpseudoklass väljer ingångselementet självt när platshållartext existerar i en form ingång. Tänk på det som ett trevligt sätt att skilja mellan ingångar som för närvarande visar platshållartext jämfört med de som inte är det.

input:placeholder-shown ( border: 5px solid red; )

Idén bakom platshållare

Textbaserade s och inmatningen kan ha platshållartext. Det är text som visas när ingången är tom för att föreslå ett möjligt värde. Till exempel kan ett formulär som frågar efter en skola ha en etikett för vad den ber om, men föreslå sedan "Forest Hills Exempel High School" i platshållaren som ett exempelvärde:

School Name:

Skillnaden mellan :placeholder-shownoch::placeholder

:placeholder-shownär för att välja själva ingången när dess platshållartext visas. Till skillnad från ::placeholdervilka stilar platshållartexten.

Här är ett diagram:

Jag tyckte att detta var mycket förvirrande som:

  1. specifikationerna har bara :placeholder-shownoch inte::placeholder
  2. :placeholder-shown kan fortfarande påverka utformningen av platshållartexten, eftersom det är ett överordnat element (t.ex. teckenstorlek).

Notera att :placeholder-shownen pseudo- klass (det är en del i ett särskilt tillstånd) och ::placeholderär en pseudo inslag (en synlig sak som inte är verkligen i DOM). Kännetecknas av enkel-kontra-dubbla kolon.

Tab Atkins rensade upp det för mig via e-post:

:placeholder-shown, som är en pseudoklass, måste välja ett befintligt element. Den väljer ingången när du befinner dig i läget för platshållare. Den ::placeholderpseudo-elementet omsluter själva platshållartexten.

Om du behöver utforma platshållartexten

Använd ::placeholder (faktiskt använd alla galna leverantörsprefix för det) som vi har beskrivit i Almanaken här.

Mer information

  • Väljare Nivå 4 Spec

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
47 51 11 * 79 9

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
88 85 81 9,0-9,2