【HTML/CSS】テキスト入力するときチカチカ点滅する棒みたいなやつ、何て名前?ついでに消し方も紹介

スポンサーリンク

※本サイトにはプロモーションが含まれています

CSS

フォームでテキスト入力するときチカチカする縦棒、ありますよね。
inputで点滅するやつ。

先日これの名前がわからなくて、ちょっと困りました。
ググりたいけどそもそもなんてググればいいかわからないとき、ありますよね笑?

そんな人のために、チカチカする棒みたいなやつの名前と、CSSで消す方法をまとめておきます。

棒の名は「キャレット」

そう、入力するときチカチカするこの棒のことを「キャレット」と呼びます。

最初、当たり前のように「カーソル」だと思ってて、カーソルでググったんです。
それでも情報はヒットしたものの、「カーソル」というと、どうしてもこっちが出てきちゃうんですよね。

こっち↓

ピンポイントでググれるので、困ったときは「キャレット」、覚えて帰ってください。

CSSでキャレットを消す方法

そもそもなぜキャレットを調べてたかというと、キャレットを消したかったから、でした。
通常のフォームではあまり出番はないかもしれませんが、
デザインの都合上、キャレットが邪魔になったときのために、CSSで消す方法をメモっておきます。

See the Pen フォームにテキスト入力するとき、チカチカ点滅する棒みたいなやつ(キャレット)を消す by nico (@etsuko-kobanawa) on CodePen.

CSSを見るとわかりますが、
「消す」というより「透明」にして見えなくしている状態です。
今回は消したいので透明を指定しましたが、caret-colorは色変えができるプロパティってことですね。

にしてもプロパティ名、caret-color(キャレットの色)。
そのまんまで覚えやすい!

まとめ

ということで、

  • チカチカ点滅する棒みたいなやつの名前は「キャレット」
  • caret-colorで、キャレットの色が操作ができる(透明にすれば非表示になる)

という話でした〜。

コメント

タイトルとURLをコピーしました