---
title: caret-color
slug: Web/CSS/caret-color
translation_of: Web/CSS/caret-color
---
<div>{{CSSRef}}</div>

<p><strong><code>caret-color</code></strong> 属性用来定义<strong>插入光标</strong>（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 <code>|</code> 的东西。</p>

<div>{{EmbedInteractiveExample("pages/css/caret-color.html")}}</div>



<p>附注：上面说的“插入光标”（insertion caret）只是光标（caret）的其中一种。比如一些浏览器有一种光标叫做“导航光标“（navigation caret），它可以在不可编辑区域内来回移动。此外，当鼠标指针移动到一段 {{cssxref("cursor")}} 属性是 <code>auto</code> 的文本上方时，或移动到 {{cssxref("cursor")}} 属性是 <code>text</code>、 <code>vertical-text</code> 的內容上方時，虽然看起来有点像插入光标，但它不是插入光标（caret），而是鼠标指针光标（cursor）。</p>

<h2 id="语法">语法</h2>

<pre class="brush: css no-line-numbers">/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentColor;

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

<h3 id="值">值</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>
 <p>默认颜色，此时浏览器应该用 <code>currentcolor</code> 来作为插入光标的颜色，但浏览器可能还会根据当前的背景色、阴影色等来对该颜色进行适当的调整以确保该插入光标具有良好的可见性。</p>

 <div class="note">
 <p><strong>附注：auto </strong>属性值在 CSS  transitions/animations 中是不支持颜色插补（interpolated）的</p>
 </div>
 </dd>
 <dt>{{cssxref("&lt;color&gt;")}}</dt>
 <dd>所指定的插入光标的颜色值.</dd>
</dl>

<h3 id="正式语法">正式语法</h3>

{{csssyntax}}

<h2 id="示例">示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;input /&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">input {
  caret-color: red;
}</pre>

<h3 id="示例演示">示例演示</h3>

<p>{{EmbedLiveSample("示例", 300, 40)}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}</td>
   <td>{{Spec2("CSS3 UI")}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("css.properties.caret-color")}}</p>