CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcaret-colorプロパティとは？テキストカーソルの色を自由に変更する方法

テキスト入力欄などに表示されるカーソル（キャレット）の色を変更したい場合は、CSSの caret-color プロパティを使用します。このプロパティを使えば、デフォルトの黒いカーソルを青や赤など、好きな色に簡単にカスタマイズできます。

caret-colorプロパティの基本

caret-color プロパティは、<input> や <textarea> などのテキスト入力要素において、テキスト挿入ポイント（キャレット）の色を指定します。指定できる値は以下のとおりです。

  • auto：ブラウザが自動的に適切な色を選択します（初期値）
  • <color>：任意の色名、16進数カラーコード、RGB値などを指定できます
  • transparent：カーソルを非表示にします

実装例：青いカーソルを表示する

次のコードでは、caret-color プロパティに「blue」を指定し、入力欄のカーソルを青色に変更しています。実際に入力欄をクリックして、青いカーソルが表示されるか確認してみてください。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .demo {
                caret-color: blue;
            }
        </style>
    </head>
    <body>
        <p>下の入力欄をクリックすると、青色のカーソルが表示されます</p>
        <input class = "demo" value="Blue Cursor"><br><br>
    </body>
</html>

まとめ

caret-color プロパティを使うことで、サイトのデザインに合わせてテキストカーソルの色を柔軟に変更できます。ダークモードのデザインやブランドカラーに合わせたUIを作成する際に特に便利なプロパティなので、ぜひ活用してみてください。

  1. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>

  2. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し