Caret color

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors } from "@/components/content.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue } from "@/components/content.tsx"; import colors from "./utils/colors";

export const title = "caret-color"; export const description = "Utilities for controlling the color of the text input cursor.";

[ caret-${name}, caret-color: var(--color-${name}); /* ${value} */, ]), ["caret-", "caret-color: var();"], ["caret-[]", "caret-color: ;"], ]} />

Examples¶

Basic example¶

Use utilities like caret-rose-500 and caret-lime-600 to change the color of the text input cursor:

{

</div>
  }
</Example>

<div class="highlight"><pre><span></span><code><span class="cm"></span>
<span class="p"><</span><span class="nt">textarea</span> <span class="na">class</span><span class="o">=</span><span class="s">"caret-pink-500 ..."</span><span class="p">></</span><span class="nt">textarea</span><span class="p">></span>
</code></pre></div>

</Figure>

<h3 id="using-a-custom-value">Using a custom value<a class="headerlink" href="#using-a-custom-value" title="Permanent link">¶</a></h3>
<p><UsingACustomValue element="textarea" utility="caret" value="#50d71e" name="caret color" variable="caret-color" /></p>
<h3 id="responsive-design">Responsive design<a class="headerlink" href="#responsive-design" title="Permanent link">¶</a></h3>
<p><ResponsiveDesign
  element="textarea"
  property="caret-color"
  defaultClass="caret-rose-500"
  featuredClass="caret-lime-600"
/></p>
<h2 id="customizing-your-theme">Customizing your theme<a class="headerlink" href="#customizing-your-theme" title="Permanent link">¶</a></h2>
<p><CustomizingYourThemeColors element="textarea" utility="caret" /></p>

</article>
            </div>
          
          
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
          <button type="button" class="md-top md-icon" data-md-component="top" hidden>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
  Retour en haut de la page
</button>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      © 2026 Rebel Platform · Propulsé par <a href="https://api.bobrebel.ca" target="_blank">APICLI</a> · <a href="https://bobcrew.org" target="_blank">BobCrew.org — on recrute des bénévoles 🤘</a>

</div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    
      
      
      <script id="__config" type="application/json">{"annotate": null, "base": "../..", "features": ["navigation.sections", "navigation.top", "navigation.instant", "search.highlight", "search.suggest", "content.code.copy"], "search": "../../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copi\u00e9 dans le presse-papier", "clipboard.copy": "Copier dans le presse-papier", "search.result.more.one": "1 de plus sur cette page", "search.result.more.other": "# de plus sur cette page", "search.result.none": "Aucun document trouv\u00e9", "search.result.one": "1 document trouv\u00e9", "search.result.other": "# documents trouv\u00e9s", "search.result.placeholder": "Taper pour d\u00e9marrer la recherche", "search.result.term.missing": "Non trouv\u00e9", "select.version": "S\u00e9lectionner la version"}, "version": null}</script>
    
    
      <script src="../../assets/javascripts/bundle.79ae519e.min.js"></script>
      
    
  </body>
</html>