概要

caret-colorプロパティは、テキスト入力フィールドや編集可能な要素で表示されるカーソル（キャレット）の色を指定するためのCSSプロパティです。キャレットとは、テキスト入力時に表示される縦線の点滅するカーソルのことです。ユーザーが入力する際に視認性を向上させるため、適切な色を設定することで、より良いユーザー体験を提供できます。

caret-colorプロパティの基本構文

caret-colorプロパティは以下の構文で使用します。

caret-color: auto | <color>;
  • auto デフォルト値で、ブラウザが自動的にキャレットの色を決定します（通常、文字の色と同じになります）。
  • <color> 指定した色でキャレットの色を設定します。色の指定方法として、キーワード、16進数（例：#ff0000）、RGB（例：rgb(255, 0, 0)）、RGBA、HSLなどが使用可能です。

使用例

基本的な使用例

以下の例では、テキスト入力フィールドのキャレットの色を赤色に指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>caret-colorプロパティの例</title>
<style>
input {
caret-color: red;
border: 1px solid #ccc;
padding: 8px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>caret-color: red</h2>
<input type="text" placeholder="ここにテキストを入力">
</body>
</html>

この例では、テキスト入力フィールドのキャレットが赤色に設定されており、視認性を高めています。

カスタムカラーの使用

任意の色指定も可能です。以下の例では、RGBAを使って透明度のある青色のキャレットに設定しています。

input.custom-caret {
caret-color: rgba(0, 120, 215, 0.8); /* 半透明の青色 */
border: 1px solid #ccc;
padding: 8px;
}

ダークモードでの使用例

ダークモード対応のサイトでは、キャレットの色も調整する必要があります。例えば、ダーク背景に明るい色のキャレットを設定することで、視認性が向上します。

<style>
.dark-mode-input {
background-color: #333;
color: #eee;
caret-color: #ffcc00; /* 明るい黄色 */
}
</style>
<input class="dark-mode-input" type="text" placeholder="ダークモードの入力フィールド">

この設定では、ダークな背景に合わせて明るい黄色のキャレットを指定しており、見やすさを保っています。

caret-colorプロパティの注意点

  • キャレットの色は、ユーザーの入力体験に直接影響します。背景色や文字色とコントラストをしっかりつけることで、キャレットが見えやすくなるように工夫しましょう。
  • 入力フィールドやコンテンツのアクセシビリティを考慮し、キャレットの色が十分に見えるように設定することが重要です。
  • 古いブラウザではcaret-colorプロパティがサポートされていないことがあるため、互換性の確認が必要です。ほとんどのモダンブラウザ（Chrome、Firefox、Safariなど）はこのプロパティをサポートしています。

まとめ

caret-colorプロパティは、テキスト入力や編集時のカーソルの色をカスタマイズする便利なプロパティです。シンプルな設定でありながら、視認性やアクセシビリティを向上させ、ユーザーにとって快適な入力体験を提供します。適切な色を選択し、背景や文字色とのコントラストを意識してデザインに取り入れてみましょう。

参照:

caret-colorプロパティ（`CSS`） | MDN Web Docs