:: plassholder - CSS-triks

Anonim

Den ::placeholderpseudo-element (eller en pseudo klasse, i noen tilfeller, avhengig av implementering nettleseren) gjør at du kan style den plassholder teksten i et skjemaelement. Som i, settes teksten med placeholderattributtet:

Du kan style den teksten i de fleste nettlesere med denne smatteringen av leverandørforvalgte velgere:

::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )

Viktig advarsel: denne syntaksen er ikke-standard, og dermed all navngitte galskap. Det vises ikke i spesifikasjonen i det hele tatt. :placeholder-showner standard, og til og med spesifikke forfattere ser ut til å tro at det ::placeholdervil være den standardiserte versjonen.

Som enhver psuedo, kan du bruke den til bestemte elementer etter behov, som:

input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )

Demo

Forskjellen mellom :placeholder-shownog::placeholder

:placeholder-showner for å velge selve inngangen når plassholderteksten vises. I motsetning til ::placeholderhvilke stiler plassholderteksten.

Her er et diagram:

Jeg syntes dette var veldig forvirrende som:

  1. spesifikasjonene bare har :placeholder-shownog ikke::placeholder
  2. :placeholder-shown kan fortsatt påvirke utformingen av plassholderteksten, siden det er et overordnet element (f.eks. skriftstørrelse).

Merk at det :placeholder-showner en pseudo- klasse (det er et element i en bestemt tilstand) og ::placeholderer et pseudo- element (en synlig ting som ikke er i DOM). Det skiller seg ut med enkelt-mot-dobbelt kolon.

Tab Atkins ryddet opp for meg via e-post:

: plassholder-vist, som en pseudoklasse, må velge et eksisterende element - det velger inngangen når du er i en plassholder-visende tilstand. :: plassholder-pseudo-elementet bryter inn den faktiske plassholderteksten.

Element eller klasse?

Denne funksjonaliteten er ikke standardisert. Det betyr at hver nettleser har en annen ide om hvordan den skal fungere.

Firefox implementerte opprinnelig dette som en pseudoklasse, men endret det av en rekke årsaker. For å gjøre en lang historie kort, kan du ikke gjøre så mye med en pseudokurs.

For eksempel hvis du vil endre fargen på teksten når inngangen er fokusert. Du vil bruke en velger input:focus::placeholdersom du ikke kunne gjøre med en pseudoklasse (de stabler ikke på samme måte).

IE10 støtter dette som en pseudoklasse, snarere enn et element. Alle andre har implementert et pseudo-element.

Firefox plassholderfarge

Du vil kanskje legge merke til hvordan fargen på plassholderen ser falmet ut sammenlignet med andre nettlesere. På bildet nedenfor vises Firefox 43 til venstre mens Chrome 47 vises til høyre:

Chrome-versjonen er ideelt sett den stilen vi vil se overalt.

Dette er fordi alle plassholdere i Firefox som standard har en opasitetsverdi på seg, så for å fikse dette må vi tilbakestille den verdien:

::-moz-placeholder ( opacity: 1; )

Du kan se mer ved å teste denne demoen i Firefox.

Støttede stiler

Pseudo-elementet støtter styling av disse egenskapene:

  • font eiendommer
  • color
  • background eiendommer
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • opacity

Pseudoklassen støtter også de fleste (om ikke alle) disse egenskapene, men er ikke like fleksibel av grunnene som er beskrevet ovenfor.

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
57 19 * Nei 79 10.1

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 81 10.3

Relaterte egenskaper

Almanakk 22. mai 2020

: plassholder vist

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