さまざまなブラウザでテキスト入力キャレットをカスタマイズするにはどうすればよいですか?

テキスト入力キャレットのスタイル設定

テキスト入力フィールドを使用する場合、キャレットの外観をカスタマイズすることができます。キャレットは、入力時にテキストが挿入される場所を示す点滅するカーソルです。キャレットの外観はブラウザによって制御されると一般に考えられていますが、実際にはそのデザインを操作するために使用できるテクニックがあります。

回答

インターネットExplorer と Edge

残念ながら、Internet Explorer または Edge でキャレットを直接カスタマイズすることはできません。 角。キャレットの外観はブラウザによって制御され、変更できません。

Chrome

Google Chrome の場合、caret-color プロパティを使用して色を変更できます。キャレットの。以下に例を示します。

input {
  caret-color: green;
}

Firefox

残念ながら、Firefox にはテキスト入力キャレット用の組み込みのスタイル オプションが提供されていません。

代替方法: キャレットのシミュレート変更点

キャレットの外観をより細かく制御する必要がある場合、回避策の 1 つは、JavaScript と CSS を使用してキャレットをシミュレートすることです。この手法には、非表示のテキストエリアを作成し、テキスト入力の動作を模倣するキーストロークをシミュレートすることが含まれます。

2018 Update

新しい CSS プロパティ、caret-color が登場しました。これは、入力フィールドのキャレットの色に直接影響します。ただし、このプロパティのサポートはまだ限られており、すべてのブラウザで機能するとは限らないことに注意することが重要です。

以上がさまざまなブラウザでテキスト入力キャレットをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。