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 =
</ 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 =
</ 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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...