CSS | caret-color Property
This property is used to set the color of the cursor in inputs, text area, or other editable areas.
Syntax:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
caret-color: auto|color;
Default Value:
- auto
Property values:
- auto: It has a default value. It uses the current-color in the web browser.
- color: It is used to specify the color value use for the caret. All values can be used (rgb, hex, named-color, etc).
Below examples illustrate the caret-color property in CSS:
Example:
HTML
<!DOCTYPE html><html> <head> <title>caret-color property</title> <style> body { text-align: center; } .geeks { caret-color: red; } .gfg { caret-color: transparent; } </style> </head> <body> <h1 style="color:green;">GeeksForGeeks</h1> <h1>The caret-color Property</h1> <input value="geeksforgeeks"><br><br> <input class="geeks" value="C programming"> <br><br> <input class="gfg" value="Java programming"> <p contenteditable class="geeks"> A computer science portal for geeks </p> </body></html> |
Output:
Supported Browsers: The browser supported by caret-color property are listed below:
- Google Chrome 57.0 and above
- Internet Explorer: Not supported
- Mozilla 53.0 and above
- Opera 44.0 and above
- Safari 11.1 and above
