どうも7noteです。IE非対応だけど点滅カーソルの装飾やっていきます。

inputやtextareaを作った場合、文字を入力する際にでる点滅するカーソル「 | 」（←これ）をCSSで好きなデザインに変える方法について記述していきます。

今回の方法では、inputやtextareaは使わずdiv要素を使いますので、ご注意ください。
入力した情報を取得する場合は、javascriptなどで入力された値を取得して利用してください。

サンプル

※通常は「 | 」が点滅する。

ソース

index.html

<div class="txtarea" contenteditable="true"></div>

style.css

.txtarea {
  caret-color: transparent;   /* デフォルトの点滅カーソルを非表示 */
  border: 1px solid #000;     /* textarea風に枠線を付ける */
  border-radius: 3px;         /* textarea風に角丸を付ける */
  padding: 2px 5px;           /* textarea風に余白を付ける */
}

/* afterで自由に装飾をする */
.txtarea:focus::after {
  content: "_";                 /* 文字や画像を指定。空にして背景画像などにしてもOK */
  animation: blink 1s infinite; /* 点滅のアニメーションを指定。アニメーションの内容は以下の通り */
}

/* 点滅アニメーション */
@keyframes blink {
  0% { opacity: 0;}
  50% { opacity: 0;}
  51% { opacity: 1;}
  100% { opacity: 1;}
}