# Building a Custom Input Caret with CSS and JavaScript

DevFeed: [Building a Custom Input Caret with CSS and JavaScript](<https://devfeed.tech/articles/custom-giraffe-caret-37259.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/custom-giraffe-caret/>)

Author: Stanko

Published: 2023-06-20T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [HTML](<https://devfeed.tech/topics/html.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>)

## AI overview

A tutorial explores a custom input caret by overlaying cloned input text and placing a caret element between spans. It uses selection positions and event handling to keep the clone aligned, while noting that the experiment is not accessible or intended for production.

## Source excerpt

Recently, a colleague asked me if there is a way to customize an input caret using CSS. I knew you could change the color of it, but it got me thinking if we could completely replace it. The problem seemed interesting to solve. But before we jump into the implementation, allow me to show you what I built in the end. Disclaimer # Please be aware that this is something I hacked together for fun, and it probably isn't accessible. You shouldn't use it in production. But I do hope it will inspire you to explore creative ways to use CSS and JavaScript. Idea # Only the caret's color can be customized using CSS, which means we need to replace it with an element rendered at the exact same position. To do so, we need a way to determine the caret's position. Luckily, the input has selectionstart and selectionend properties. They represent the start and end positions of the text selection. If they have the same value, that means the caret is right there. But it's somewhat difficult to measure the exact pixel value of selectionstart because it depends on the text size. However, we can cheat a little. Instead of trying to measure and position the caret absolutely, I decided to clone the text from the input and position the custom caret right after it. The clone needs to be updated every time the caret moves or when the text in the input has changed. Finally, we need to put the clone over the input, and hopefully, things will align. It is not the first time I've overlapped text over an input like this. Just a few years ago, this was a common way to create input placeholders. Anatomy # If we have an input with the text Hello Friends! and the caret positioned right after the word Hello, our HTML structure should look something like this: <!-- Original input --> <input value="Hello World" /> <!-- Clone of the input's content with the custom caret squeezed in --> <div> <span>Hello</span> <span class="caret"><!-- Giraffe goes here --></span> <span> Friends!</span> </div> As the caret m