【53】キャレットの色を変えられる caret-colorプロパティ

最終更新日:2020年03月01日  (初回投稿日:2020年03月01日)

caret-colorプロパティは、名前の通り、キャレットの色を指定します。

「キャレット」とは、テキスト入力時に入力位置を示すもの。
たいていは、縦のラインで点滅しています。

CSS Basic User Interface Module Level 3 ではこのcaret-colorプロパティだけですが、草案中の Level 4 では、caret-shapeプロパティ(キャレットの形状)も加わり、caretショートハンドプロパティも追加されています。将来これらのプロパティ構成になるっぽいです。

本日のINDEX
  1. caret-colorプロパティの値
  2. caret-colorプロパティの指定サンプル

参考:
CSS Basic User Interface Module Level 3 (CSS3 UI) | W3C Recommendation
caret-color - CSS | MDN

caret-colorプロパティの値

caret-colorプロパティは「色」を指定するので「CSS の色指定」のルールを使います。
CSS の色指定については、
[14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)をご覧ください。

caret-colorプロパティの値
キーワード auto
transparent
currentColor
autoがデフォルト値。たいていは currentColor(文字色) が使われますが、背景色などによってブラウザが調整することもあるそうです。
その他のキーワードは、transparent(=透明色)、currentColor(=文字色)
CSSの色指定 CSSの色指定のルールで指定します。
値の継承 する 適用できる要素 すべての要素

caret-colorプロパティの指定サンプル

caret-colorプロパティでキャレットの色を変えてみたサンプルです。
テキストエリア内をクリック(またはタップ)してみてください。

サンプルのソースコードはこちら。
caret-colorプロパティは インラインで指定しています。

<textarea>caret-color: 指定なし(= auto)</textarea>
<textarea style="caret-color:red;">caret-color: red</textarea>
<textarea style="caret-color:#5ad21e;">caret-color: #5ad21e</textarea>

次回予告

次回は、::selection 疑似要素 についてちょっとメモ。
この疑似要素を使って作ったセレクタで、テキストの選択時にできる「ハイライトカラー」などを変更できます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2020/06 | 07
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.