キャレットをデザインしたい

Question

こんにちは．
キャレットをデザインしたいです．
CSSでもjavascriptでもなんでもいいです．
キャレットって，あの，テキストボックスでテキスト入力中にあるやつです．
これがわかりやすいです．

あれをカスタマイズしたいです．
たとえば，太くしたり，色を変えたり・・・
そういうことってできますか？

よろしくお願いします．

Answer 1

こんにちは。
ズバリこれで解決というものではありませんが、
こんなのを見つけました。

Javascript terminal-caret emulation

上記ページの下にある、Tutorial here から説明に行けるのですが、
やはりかなり面倒そうですね。ちなみに上記は、StackOverflow での
同様の質問
How to adjust the Caret (blinking cursor) size inside searchbar with css
から辿り着きました。

ご参考まで

Answer 2

できないことはないでしょうが、とても面倒くさいと思います。
0. divなどtextareaの代わりのタグを一つ作り、clickにイベントリスナを設定
0. クリックされたらその位置を特定してposition:absoluteなどでキャレット役のタグを配置
0. 点滅させる
みたいな感じの実装になるんですかね。
要するにエディタ部分を丸々自力で作る羽目になると思いますので、それだけのためにやるのはあまり現実的ではないのかな、と思いますがいかがでしょうか。

確かAce Editorは独自のキャレットを描画していたはずです。もしかしたらヒントになるのではないでしょうか。
CodeMirrorはどうだったか…分かりません。