Menu
I'm trying to control the caret size in a html textarea. The size seems to default to the line height, is there a way to manually control it?
650
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.
The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor. The caret appears in elements such as <input> or those with the contenteditable attribute.
You can't increase the size of the default cursor using CSS or jQuery. But you can replace the cursor with the custom image of any size using pure CSS by cursor : Url() property.
There isn't any way to change how the caret looks in a textarea. If you want to do that, you'll have to use something other than a textarea, such as a div or a canvas element and control everything with JavaScript.
199
Worth noting that some fonts the default size and position of the cursor just looks weird. If this is a high priority for you, it might be worth at least considering switching to a different font. Here is an example of one Google font that looks super weird and two that don't:
You might also have luck generating your webfont files with different settings. The font squirrel webfont generator in Expert Mode has settings for vertical metrics and x-height matching that may help with this issue. Most paid webfonts from different foundries also have similar export settings now. Definitely a time consuming task to tweak settings, export repeatedly, install the new files and check your work, but can often be worth it.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
