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" />

Note that you also have the option to make it invisible, by simply setting its value to transparent.

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

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

---

Resources:

• The caret-color property in CSS