フォームでテキスト入力するときチカチカする縦棒、ありますよね。
inputで点滅するやつ。
先日これの名前がわからなくて、ちょっと困りました。
ググりたいけどそもそもなんてググればいいかわからないとき、ありますよね笑？
そんな人のために、チカチカする棒みたいなやつの名前と、CSSで消す方法をまとめておきます。
棒の名は「キャレット」
そう、入力するときチカチカするこの棒のことを「キャレット」と呼びます。
最初、当たり前のように「カーソル」だと思ってて、カーソルでググったんです。
それでも情報はヒットしたものの、「カーソル」というと、どうしてもこっちが出てきちゃうんですよね。
こっち↓
ピンポイントでググれるので、困ったときは「キャレット」、覚えて帰ってください。
CSSでキャレットを消す方法
そもそもなぜキャレットを調べてたかというと、キャレットを消したかったから、でした。
通常のフォームではあまり出番はないかもしれませんが、
デザインの都合上、キャレットが邪魔になったときのために、CSSで消す方法をメモっておきます。
See the Pen フォームにテキスト入力するとき、チカチカ点滅する棒みたいなやつ（キャレット）を消す by nico (@etsuko-kobanawa) on CodePen.
CSSを見るとわかりますが、
「消す」というより「透明」にして見えなくしている状態です。
今回は消したいので透明を指定しましたが、caret-colorは色変えができるプロパティってことですね。
にしてもプロパティ名、caret-color（キャレットの色）。
そのまんまで覚えやすい！
まとめ
ということで、
- チカチカ点滅する棒みたいなやつの名前は「キャレット」
caret-colorで、キャレットの色が操作ができる（透明にすれば非表示になる）
という話でした〜。
コメント