テキスト入力のキャレット スタイルとは何ですか?

HTML のテキスト入力では、テキスト入力キャレットと呼ばれるテキスト中に表示されるマークが観察されます。テキスト入力カーソルとも呼ばれます。

このチュートリアルでは、テキスト入力キャレットのスタイルを学習します。ただし、最新のブラウザでは形状の変更がサポートされていないため、テキスト入力キャレットの色を変更することしかできません。

ユーザーは、次の構文に従って CSS 'caret-color' プロパティを使用して、テキスト入力キャレットの色を変更できます。

上記の入力では、「color」には文字列形式の色名、16 進数値、RGB 値、または HSL 値を指定できます。

例 1

例 1

以下の例では、2 つのテキスト入力を定義し、「inp」と「inp1」というクラス名を付けます。 CSS プロパティ「caret-color」を使用して、最初の入力要素に「赤」色を設定します。

さらに、2 番目の入力要素で「auto」値を使用します。 auto 値はブラウザのデフォルト色 (ほとんどの場合黒) を採用するため、出力では、最初の入力ボックスに赤いカーソルが表示され、2 番目の入力ボックスに黒いカーソルが表示されます。

例 2

以下の例では、CSS プロパティ「color-caret」の値として「transparent」を使用して、カーソルの透明色を設定します。基本的に、テキスト入力カーソルを非表示にする必要がある場合に使用できます。

出力では、ユーザーは入力ボックスにテキストを入力できますが、カーソルが表示されないことがわかります。

例 3

以下の例では、div 要素内にテキストを追加しています。その後、div 要素に true 値を指定して「contenteditable」属性を使用しました。これにより、div 要素のコンテンツが編集可能になります。

ここでは、編集可能な div 要素のテキスト入力カーソルをスタイル設定し、ユーザーが出力で確認できるピンク色を与えます。

ユーザーは、「caret-color」CSS プロパティを使用してテキスト入力キャレットのスタイルを設定する方法を学びました。ただし、一部の古いブラウザは「caret-shape」属性もサポートしており、これを使用してカーソルの形状を変更できますが、最新のブラウザはそれをサポートしていません。

以上がテキスト入力のキャレット スタイルとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。