How to create colorful text inputs with CSS

CSS never ceases to amaze me

Every few and then, I check the web design subreddit to check some of the ideas proposed on there, because there are really talented people out there showing their work, and that might inspire you.

But sometimes, you find CSS related stuff that not only it's helpful, but also it blows your mind. What if I tell you that you can change the color of the caret of an input? That's cool right? The only thing we need is this property:

The MDN describes the property as the following:

"The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. By default, it is black, but its color can be altered with this property."

By using this property, we would get something like this (click on the input to see the effect):

This simple line of CSS can be very helpful, and I'm pretty sure a lot of you can imagine lots of usages for this.

But what if I tell you that we can animate this input even more? With just a little bit more of CSS we can get something as cool as this:

One might think that this is a little bit too much, and that might be right, but sometimes we just wanna have some fun with the styles, and this is one of those times.

The point of this post, appart from showing you this CSS property, is to show how inmense is CSS and how much stuff we can learn and create that we don't even know about yet. Fascinating, right?

Comments

[.]

great article thanks a lot.

[David Díaz]

Thank you for reading it!

[.]

you are welcome.

[Nazanin Ashrafi]

This is so cool 😍🙌🙌

[David Díaz]

I know right? CSS is amazing!