How to change cursor color using CSS ?
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;" > w3wiki </ 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;" > w3wiki </ 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 > |
Output: