Typography

Placeholder Color

Utilities for sets the placeholder color using the ::placeholder pseudo element.

Variant

Responsive Dark Mode Light Mode Reduce-Motion Selection-Hover Expand First-Last-Selection Child-Selection Portrait Landscape Fullscreen Hover Group-Hover Focus Group-Focus Focus-Visible Focus-Within Active Visited Checked Disabled

API

class	css
placeholder-transparent	color: transparent	Text
placeholder-white	color: #fff	Text

class
placeholder-shade-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
placeholder-tone-`{palette}`-`{modifier}`
placeholder-tint-`{palette}`-`{modifier}`

Usage

<input class="placeholder-tint-lava-1 ..." placeholder="...">

HTML

input {
  @extend
    .placeholder-tint-lava-1;
}

SCSS

Set auto dark theme enabled to an element with added (dark) prefix.

<input class="placeholder-tint-lava-1 ... (dark)placeholder-tint-lava-5" placeholder="...">

HTML

input {
  @extend
    .placeholder-tint-lava-1,
    .(dark)placeholder-tint-lava-5;
}

SCSS