CSSのcaret-colorプロパティでキャレット（テキストカーソル）の色を変更する方法
テキスト入力時に表示される挿入キャレット（テキストカーソル）の色を変更するには、CSSのcaret-colorプロパティを使用します。このプロパティを使うことで、input要素やtextarea要素などの編集可能な要素において、デフォルトの黒いカーソルを任意の色にカスタマイズできます。
caret-colorプロパティの基本
caret-colorプロパティには、以下のような値を指定できます。
- 任意の色：red、chartreuse、#ff0000 などの色名やカラーコード
- transparent：キャレットを非表示にする（透明化）
- auto：ブラウザのデフォルト設定に従う
例1：キャレットの色を変更する
次の例では、input要素のキャレットの色をchartreuse（黄緑色）に変更しています。
<!DOCTYPE html>
<html>
<head>
<style>
form {
padding: 2%;
margin: 2%;
text-align: center;
}
form:focus-within {
box-shadow: 0 0 10px rgba(0,0,0,0.6);
background-color: beige;
}
input {
font-size: 3em;
caret-color: chartreuse;
margin: 2%;
}
</style>
</head>
<body>
<form>
<input value="Check the caret color!" />
<button>Hit!</button>
</form>
</body>
</html>実行結果
上記のコードを実行すると、入力フィールドをクリックした際に黄緑色のキャレットが表示されます。
例2：キャレットを非表示にする
caret-colorにtransparentを指定すると、キャレットを完全に非表示にできます。次の例では、textarea要素のキャレットを見えなくしています。
<!DOCTYPE html>
<html>
<head>
<style>
form {
padding: 2%;
margin: 2%;
background-color: thistle;
}
form:focus-within {
box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
textarea {
caret-color: transparent;
}
</style>
</head>
<body>
<form>
<input type="radio" />1
<input type="radio" />2
<textarea placeholder="Invisible"></textarea>
</form>
</body>
</html>実行結果
textareaを選択して文字を入力しようとしても、キャレットが表示されないことが確認できます。
対応ブラウザと注意点
caret-colorプロパティは、Chrome、Firefox、Safari、Edgeなどの主要なモダンブラウザでサポートされています。ただし、Internet Explorerでは利用できないため、業務システムなど古いブラウザへの対応が必要な場合は注意してください。
また、transparentを指定してキャレットを非表示にすると、ユーザーがテキスト入力位置を把握しにくくなる可能性があります。デザイン性とユーザビリティのバランスを考慮して使用することをおすすめします。
-
CSSでスタック型フォームを作成する方法【サンプルコード付き】
スタック型フォームとは、ラベルや入力フィールドを縦方向に一列に積み重ねて配置したフォームのことです。視線を上から下へ自然に移動できるため可読性が高く、スマートフォンなど画面幅が狭いデバイスでも扱いやすいという大きなメリットがあります。 ここでは、CSSを使ってシンプルな会員登録用のスタック型フォームを作成する方法を紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-sc
-
CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方
CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1