How to change cursor color using CSS ?

Last Updated : 15 May, 2023

In this article, we will see how to change the cursor color in the input fields using CSS. To change the cursor color, we will use caret-color property. This property is used to set the color of the cursor for input fields, textarea, or other editable areas.

Syntax:

caret-color: auto|color;

Parameters:

auto: It has a default value. It uses the current color in the web browser.
color: It is used to specify the color value used for the caret. All values can be used (RGB, hex, named-color, etc).

Example 1: In this example, we will use the caret-color property to set the cursor color for input fields.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        How to change cursor color using CSS? 
    </title> 
  
    <script src= 
        "https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
        } 
          
        /* Change the cursor color to green */ 
        input[type="text"] { 
            caret-color: green; 
        } 
  
        /* Change the cursor color to red */ 
        input[type="email"] { 
            caret-color: red; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to change cursor color using CSS?  
    </h3> 
  
    <form action=""> 
        <label for="name">Enter Your Name</label> 
          
        <input type="text" name="name" id=""> 
        <br><br> 
  
        <label for="mail">Enter You Email</label> 
        <input type="email" name="mail" id=""> 
    </form> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use the caret-color property to set the cursor color for the textarea field.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        How to change cursor color using CSS? 
    </title> 
  
    <script src= 
        "https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
        } 
          
        /* Change the cursor color to red */ 
        textarea { 
            caret-color: red; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to change cursor color using CSS?  
    </h3> 
  
    <label for="txtarea">Enter Yout Feedback</label> 
    <br> 
    <textarea name="txtarea" cols="30" rows="5"></textarea> 
</body> 
  
</html>