caret-color:テキストの挿入位置や選択補助として表示されるキャレットの色を指定する
初期値 | auto |
適用対象 | 全ての要素 |
継承 | する |
アニメーション | <color>値 |
対応ブラウザ | caniuseで確認 |
caret-colorプロパティの説明
caret-color
は、テキストの挿入位置や選択補助として表示されるキャレットの色を指定します。キャレットは入力カーソルと呼ばれることもあります。通常、テキスト1行分の細長い垂直線で点滅するマーカーとして表示されます。
caret-color
は、<input>
や<textarea>
、contenteditable属性の与えられた編集可能なエリアに表示されます。既定値では黒いマーカーですが、この色を変えるものとして機能します。
caret-colorに指定できる値
- auto
- ユーザーエージェントの既定値を採用します。一般的には
currentcolor
が選ばれますが、ユーザーの視認性を高めるために、独自の配色がなされている場合があります。 - <color>
- CSSで使用できる色指定の値を使って、キャレットの色を変更します。16進数、RGB値、HSL値などが使えます。
caret-colorの使い方とサンプル
caret-color
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;
/* <color>値 */
caret-color: cyan;
caret-color: #ff0000;
caret-color: rgb(0, 0, 0);
caret-color: hsla(198, 97%, 30%, .5);
/* グローバル値 */
caret-color: inherit;
caret-color: initial;
caret-color: revert;
caret-color: unset;
caret-colorの実例
それでは実際にcaret-color
プロパティの書き方を見ていきましょう。以下の例では、キャレットの色を変えた時の見栄えを、背景白と黒の状況で確認できます。キャレットが視認しづらい場合は、文字列の中間を選択してみて下さい。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
}
.samp_box div {
margin-top: 1rem;
}
.samp_box input {
width: 15rem;
font-size: 2rem;
vertical-align: middle;
}
#caret_2 {
caret-color: #f00;
}
#caret_3 {
caret-color: #0f0;
}
#caret_4 {
caret-color: #f00;
background-color: #000;
color: #eee;
}
#caret_5 {
caret-color: #0f0;
background-color: #000;
color: #eee;
}
HTML
<section class="samp_box">
<div>
<input id="caret_1" type="text" value="選択して確認">
<label for="caret_1">指定なし</label>
</div>
<div>
<input id="caret_2" type="text" value="背景白の場合">
<label for="caret_2">caret-color: #f00;</label>
</div>
<div>
<input id="caret_3" type="text" value="背景白の場合">
<label for="caret_3">caret-color: #0f0;</label>
</div>
<div>
<input id="caret_4" type="text" value="背景黒の場合">
<label for="caret_4">caret-color: #f0f;</label>
</div>
<div>
<input id="caret_5" type="text" value="背景黒の場合">
<label for="caret_5">caret-color: #0f0;</label>
</div>
</section>
caret-colorに関連するCSSプロパティ
要素の装飾や描画指定 | |
---|---|
accent-color | 一部の要素の強調色を指定する |
all | 要素の全てのプロパティを初期化する |
appearance | ブラウザが独自に描画する標準的なUIをCSSで変更できるようにする |
caret-color | テキストの挿入位置や選択補助として表示されるキャレットの色を指定する |
cursor | マウスポインタのカーソルの種類を指定する |
filter | 画像やテキストにフィルタ効果を与える |
isolation | 要素のスタッキング・コンテキストを制御する |
mix-blend-mode | 重なり合った要素の内容と背景に対して描画モードを指定する |
opacity | 要素の不透明度を指定する |
scroll-behavior | スクロールが発生した場合の挙動を指定する |
user-select | ユーザーがテキストを選択できるかどうかを指定する |