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: