v132 · css

Chat Input

A chat interface where the input caret changes style based on the current input mode: auto for normal text, manual plus a custom pulse for mentions, and manual steady for code snippets.

Feature detection: checking…

Click into the message input. Type @ to trigger mention mode (blue caret), type a backtick to trigger code mode (green steady caret). Click any conversation to switch.

Conversations
AL
Alice L.
The CSS PR looks great
BM
Bob M.
Can you share the snippet?
CK
Carol K.
Let me check the docs
Alice L. online
Hey! The CSS PR looks great.
Thanks! I'm testing the caret-animation property.
Nice. Does it work for mentions?
Yes — type @ to see the blue caret.
caret: auto (normal)
Type @ or a backtick to inspect the live computed caret-animation mode.

caret-animation values

auto (platform)
caret-animation: auto — classic OS blink
manual steady
caret-animation: manual with no author animation
manual pulse
caret-animation: manual plus keyframes
invalid keyword
caret-animation: blink is rejected; computed value falls back
/* Normal typing: platform blink */
textarea[data-mode="normal"] {
  caret-color: var(--text-black);
  caret-animation: auto;
}

/* @mention mode: custom pulse */
textarea[data-mode="mention"] {
  caret-color: var(--accent-blue);
  caret-animation: manual;
  animation: mentionCaret 1s steps(1) infinite;
}

/* Code snippet mode: steady (like a terminal) */
textarea[data-mode="code"] {
  caret-color: var(--accent-emerald);
  caret-animation: manual;
  animation: none;
}

see also