Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

searchbar

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.

like image 721
weia design Avatar asked Mar 06 '13 13:03

weia design


People also ask

How do you change caret size in CSS?

If caps is ok in your context, one easy hack is to use the css attribute font-variant: small-caps; to get the caret larger than the text.

How do I make my cursor blink in CSS?

Animating the cursor To animate the cursor, first, we need to define a keyframe called cursor-blink that will reduce the opacity of the cursor to 0 when the keyframe is “0%”. Once done, we can now use this keyframe on the cursor using the animation shorthand like so.


4 Answers

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%);
}
like image 98
Hossein Avatar answered Oct 11 '22 01:10

Hossein


Searching for Caret instead of Cursor will give you more results.

Appearently, it is not possible in a textarea, but is possible in other elements through Javascript:

Take a look at:

How to control cursor/caret size with CSS

How to modify the caret with css

and

Styling text input caret

like image 39
Andrea Ligios Avatar answered Oct 11 '22 02:10

Andrea Ligios


There is no way to styling the caret currently, but if you use another DOM element to display the input control value then you can. Take a look at How to use this square cursor in a HTML input field?

sample

like image 3
sarkiroka Avatar answered Oct 11 '22 03:10

sarkiroka


If caps is ok in your context, one easy hack is to use the css attribute font-variant: small-caps; to get the caret larger than the text.

Another approach is to create your own caret using an input field replacement, someone spent time and achieved something working, but the author recommend to keep using the standard caret.

like image 3
Digitonaut Avatar answered Oct 11 '22 02:10

Digitonaut