Interactivity

Placeholder Color

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

Variant

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

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