
How to Change Caret Color in CSS
CSS often has some hidden gems. One of them is the caret-color
property. Seems like you can really change everything with CSS. You can use it to give different color to your carets inside input fields:
<!-- You can set the color of the caret for your input -->
<style>
.golden {
caret-color: goldenrod;
}
.transparent {
caret-color: transparent;
}
</style>
<input value="I have a golden rod" class="golden" />
<input value="I donβt caret" class="transparent" />
Copied to clipboard!
Note that you also have the option to make it invisible, by simply setting its value to transparent
.


Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Resources:
π More Webtips
Master the Art of Frontend
Unlimited access to hundred of tutorials
Access to exclusive interactive lessons
Remove ads to learn without distractions