Caret-color sets the color of the text insertion caret in editable content. It is independent of the text selection highlight and the control's focus outline.
Make this comfortable
CSS caret-color: keep the insertion point visible
When to use it
A dark search field uses pale text. If the caret inherits a color that blends into its surface, users can lose track of the insertion point even while the field is focused. Give the field a caret color with visible contrast and keep a separate focus outline around the control. The sample scopes both to the search input, rather than changing every editable surface in the app. Test when the field is empty, after browser autofill, in forced colors, and with an invalid state that changes the border. A caret color cannot make a disabled field editable or identify the input to a screen reader. Preserve the HTML label and a stable text color in every state.
.case-search { color: #f7fafc; background: #173148; caret-color: #f6d77a; }
.case-search:focus-visible { outline: 3px solid #f6d77a; outline-offset: 2px; }Cost and verification
Changing a caret color has negligible performance cost. The cost is reviewing the complete state palette: a bright caret against one background may disappear after autofill or an error theme changes the surface. In forced colors, allow system colors to take priority where the browser adjusts them. Do not remove the focus outline because the caret is visible; a user may focus an empty control without an insertion point showing yet. Test keyboard entry and text selection separately, since the caret and selection are different feedback channels.
Common Mistakes
- Do not make the caret and background the same color.
- Do not treat the caret as a replacement for focus indication.
- Do not use caret-color to imply a control is editable when it is disabled.
Connected lessons
css
reference
web