How to adjust the Caret (blinking cursor) size inside searchbar with css

weia design picture weia design · Mar 6, 2013 · Viewed 76k times · Source

I tried to google it, and surprisingly found no result related... I wonder how can I use css to adjust the blinking cursor inside the search box with CSS? I adjusted the size of the search box, but seem the blinking cursor's size is still original small text size.

Answer

Hossein picture Hossein · Jul 19, 2017

You cannot change the width of the caret (at least for now); But you can change the caret color for majority of modern browsers

https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

input {
 caret-color: red;
 caret-color: #ff0000;
 caret-color: rgb(255, 0, 0);
 caret-color: hsl(0, 97%, 50%);
}