テキスト入力キャレットのスタイル設定 質問する

テキスト入力キャレットのスタイル設定 質問する

フォーカスされた のキャレットのスタイルを設定したいです<input type='text'/>。具体的には、色と太さです。

ベストアンサー1

あなたが探している言葉は「キャレット」です。ただし、これはブラウザのデザインの一部であり、CSS の範囲外であると私は信じています。

しかし、ここに興味深い記事がありますJavascript と CSS を使用してキャレットの変更をシミュレートする http://www.dynamicdrive.com/forums/showthread.php?t=17450ちょっとハックっぽい気がしますが、おそらくタスクを達成する唯一の方法です。この記事の要点は次のとおりです。

画面のどこかに、ビューアーのビューから外れたところにプレーンなテキストエリアを配置し、ユーザーが「偽のターミナル」をクリックするとテキストエリアにフォーカスを当て、ユーザーが入力を開始すると、テキストエリアに入力されたデータを「ターミナル」に追加するだけです。

ここデモの様子です


2018年アップデート

そこには新しい CSS プロパティcaret-colorinputこれは、または領域のキャレットに適用されますcontenteditable。サポートは増加していますが、100% ではありません。これは色にのみ影響し、幅やその他の種類の外観には影響しません。

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>

おすすめ記事