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.
Resources:
Remove ads
Want to get weekly updates to your mailbox? 📬
📚 Get access to exclusive content
Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕
Get access
