MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

caret-color

要約

caret-color CSS プロパティは、ユーザーがテキストやその他のコンテンツを挿入する要素の挿入箇所の可視インジケータであるキャレットの色を定義します。

ノート: ユーザーエージェントには、 “carets” としてカウントされる追加機能があることがあります。たとえば、挿入キャレットと似ていますが、編集できないテキスト内を移動でき、機能的にはキャレットである “ナビゲーションキャレット” などがありえます。一方、cursor プロパティが auto のときにテキスト上をホバーした場合や、cursor プロパティが textvertical-text のときに、表示されるカーソル画像がキャレットに見えることがありますが、実際には異なります(それはカーソルです)。

初期値auto
適用対象全要素
継承継承する
メディアinteractive
計算値auto is computed as specified and <color> values are computed as defined for the color property.
Animation typecolor
正規順序per grammar

構文

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

auto
ユーザーエージェントは、currentcolor を使用するはずですが、currentcolor や背景、影などに基づいて、周囲のコンテンツとの良好な視認性およびコントラストを確保するために、キャレットの色を自動的に調整することがあります。
ノート: ユーザーエージェントは auto の値に currentcolor を使用することがありますが、autocurrentcolor 値とは異なり、transition や animation で補完されません。
<color>
キャレットの色として指定した色を使用する。

形式的な構文

auto | <color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = transparent | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

HTML コンテンツ

<input id="example" />

CSS コンテンツ

#example {
  caret-color: red;
}

結果

仕様

仕様 ステータス コメント
CSS Basic User Interface Module Level 3
caret-color の定義
勧告候補 初期定義。

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 57.0 未サポート 53.0 (53.0) 未サポート 未サポート ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? 53.0 (53.0) 未サポート 未サポート ?

ドキュメントのタグと貢献者

 このページの貢献者: YuichiNukiyama
 最終更新者: YuichiNukiyama,