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

CSSでキャレット（カーソル）の色を指定する方法｜caret-colorプロパティの使い方

テキスト入力時に表示されるキャレット（挿入位置を示す縦棒カーソル）の色を変更したい場合は、CSSの caret-color プロパティを使用します。このプロパティを使えば、<input> や <textarea> などの編集可能な要素におけるカーソルの色を自由にカスタマイズできます。

caret-colorプロパティの基本的な使い方

caret-color プロパティには、キーワード・16進数・RGB・HSLなど、任意のCSSカラー値を指定できます。以下は、入力欄のキャレットを青色に設定するシンプルな例です。

サンプルコード

<!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で指定できる主な値

  • <color>：任意の色を指定します（例：blue、#ff0000、rgb(255, 0, 0) など）。
  • auto：ブラウザが適切な色を自動的に選択します。多くの場合、文字色（currentcolor）と同じになります。
  • transparent：キャレットを非表示にします。

caret-color プロパティは、Chrome・Firefox・Safari・Edgeなどの主要なモダンブラウザでサポートされているため、安心して使用できます。

  1. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1

  2. CSSのcaret-colorプロパティでキャレット（テキストカーソル）の色を変更する方法

    テキスト入力時に表示される挿入キャレット（テキストカーソル）の色を変更するには、CSSのcaret-colorプロパティを使用します。このプロパティを使うことで、input要素やtextarea要素などの編集可能な要素において、デフォルトの黒いカーソルを任意の色にカスタマイズできます。caret-colorプロパティの基本caret-colorプロパティには、以下のような値を指定できます。任意の色：red、chartreuse、#ff0000 などの色名やカラーコードtransparent：キャレットを非表示にする（透明化）auto：ブラウザのデフォルト設定に従う例1：キャレットの色を変更する