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

<p>La propiedad CSS <strong><code>caret-color</code></strong> especifica el color del cursor de texto, el indicador visible del punto de inserción en un elemento donde el usuario puede introducir texto u otro contenido.</p>

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

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

<div class="note">
<p><strong>Nota:</strong> Los agentes usuario podrían incluir otras cosas que consideren “cursor de texto.” Por ejemplo, puede haber una “cursor para navegación,” que actúa de forma similar al cursor de texto pero puede ser movido en textos no editables. Por otro lado, la imagen de cursor mostrada cuando se coloca el cursor del ratón sobre texto cuando la propiedad {{cssxref("cursor")}} es <code>auto</code>, o sobre un elemento donde la propiedad <code>cursor</code> es <code>text</code> o <code>vertical-text</code>, aunque a veces se parezca al cursor de texto, no lo es (es un cursor del ratón). En algunos navegadores que no soportan esta propiedad, el color del cursor de texto no está asociado al color de la fuente.</p>
</div>

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

<h2 id="Sintaxis">Sintaxis</h2>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>Los agentes usuarios deberán usar <code>currentcolor</code>, pero podrían ajustar automáticamente el color del cursor para asegurar la correcta visibilidad y contraste con el contenido alrededor, posiblemente con base en <code>currentcolor</code>, el fondo, sombras, etc.
 <div class="note">
 <p><strong>Nota:</strong> Aunque los agentes usuarios puedan usar <code>currentcolor</code> (que usualmente es animable) para el valor <code>auto</code>, <code>auto</code> no es interpolado en las transiciones/animaciones.</p>
 </div>
 </dd>
 <dt>{{cssxref("&lt;color&gt;")}}</dt>
 <dd>Color del cursor de texto.</dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

{{csssyntax}}

<h2 id="Ejemplo">Ejemplo</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="Resultado">Resultado</h3>

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

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentarios</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>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

{{Compat("css.properties.caret-color")}}