# caret-color

> テキスト入力時のカーソル（キャレット）の色を指定するプロパティです。フォーム要素のブランディングやダークモード対応に便利で、ユーザーの入力体験を向上させます。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/caret-color/

## 構文

```css
caret-color: auto | <color>
```

## Tailwindでは

- `caret-pink-500` → caret-color: パレットのpink-500
- 一般形: `caret-{color}-{shade}`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 57+ / Firefox 53+ / Safari 11.1+ / Edge 79+

## コード例

### 例1: カーソルを赤色にする

```css
caret-color: red;
```

### 例2: カーソルを青色にする

```css
caret-color: #3b82f6;
```

### 例3: カーソルを非表示にする

```css
caret-color: transparent;
```

### 例4: デフォルトの色（通常は黒）

```css
caret-color: auto;
```

## TIPS

ブランドカラーに合わせたり、ダークモードで見やすくできる。アクセシビリティも考慮して、コントラストの高い色を選ぶ。

## よくある間違い

input、textarea、contenteditableな要素にのみ効果がある。通常のテキストには効かない。

## AIがよく間違えるポイント

入力欄の点滅カーソル（キャレット）の色だけを変えるプロパティで、ブランドカラーの入力UIの仕上げに効きます。AIはこのプロパティの存在自体を出さないことが多く、カーソル色が背景に溶けて見えない（ダークUIで黒キャレット）問題の解として覚えておく価値があります。transparentにして独自キャレットを描く上級技もあります。

## AIへの依頼文例

- ダーク背景の検索ボックスでキャレットが見えない問題をcaret-colorで修正して

## 関連プロパティ

- [color](https://www.css-dictionary.com/property/color.md)
- [accent-color](https://www.css-dictionary.com/property/accent-color.md)