How to control cursor/caret size with CSS

I'm trying to control the caret size in a html textarea.开发者_Python百科 The size seems to default to the line height, is there a way to manually control it?

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.

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.