Give your input carets some color with these obscure css selectors

Add some on-brand color to those blinkers.

Quick tip of the day: input field carets can be colored with css. They're the blinking cursors that show where the user is currently typing. This is the sort of style that once upon a time needed to be faked with some trickery, but it's gone completely native these days.

As an example, this input should have a #f00 caret:

This is done with the caret-color property, which as you can expect takes hex, hsl, rgba or any other color value.

.some-element {
    caret-color: #f00;
}

While caret-color has full browser support (minus internet explorer), there are a few other caret-related properties making their way through the working group which don't. Until those are ready back to trickery it is.

In the bad old days

In case you were wondering how it could have been faked:

We get the same effect by setting the text color to our desired caret color (thereby setting the caret color), hiding the body text and using a text shadow with our body color as stand-in body text:

.some-element {
    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

I'd joke about how older css required hacks like this but let's be honest, our stylesheets are still full of these. We've just rebranded them "workarounds" and trained our bundlers to add them for us.