CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 2174

Cursor following text appears taller than the text

I have a textarea to input text, if I type some words the cursor following the text appears taller than it should be (as depicted below). Why is it showing that way? Can it be as tall as the words with their font size as 38px?

The code snippet:

<textarea name="quotes" cols="40" rows="10"   placeholder="  What`s your quotes? " style="height:100px;width:99%;overflow:auto;border: 1px solid silver;font-size:38px" keynav:shortcut="10"></textarea>

An illustration:

enter image description here

The browser I am using is Chrome.

Please help me solve this issue.

Upvotes: 1

Views: 1845

Answers (3)

Lerner Zhang
Lerner Zhang

Reputation: 7130

The font matters in this issue, and please try editing in these three text areas:

<textarea name="quotes" cols="40" rows="1"   placeholder="What`s your quotes? " style="height:60px;width:99%;overflow:auto;border: 1px solid silver;font-size:38px" keynav:shortcut="10">font 1</textarea>
<textarea name="quotes" cols="40" rows="1"   placeholder="What`s your quotes? " style="height:60px;width:99%;overflow:auto;border: 1px solid silver;font-size:38px;font-family:fantasy" keynav:shortcut="10">ffffff 2</textarea>
<textarea name="quotes" cols="40" rows="1"   placeholder="What`s your quotes? " style="height:60px;width:99%;overflow:auto;border: 1px solid silver;font-size:38px;font-family:cursive" keynav:shortcut="10">gggggg 3</textarea>

You'll see that the cursor in the first one appears normal, the second and the third taller exceeding downward and upward respectively. Here is the pen on Codepen: https://codepen.io/lerner-zhang/pen/ExregOd

Upvotes: 0

Catarina Nogueira
Catarina Nogueira

Reputation: 1138

The problem is probably solved cause are from 3 years from now, but reading the comments saying that were an ilusion problem(cause cursor was same size of the line, i solved my problem using : 

line-height: 27px;

in my input field.

Maybe can help someone in future :D

Upvotes: 0

Derek Henderson
Derek Henderson

Reputation: 9706

The answer to your question ('Why does the blinking cursor appear larger than the text?') is that it's an illusion. The cursor actually is the height of the full height of the line. Remember that the bottom of a g, j, p, q, or y is also part of the line. So, it might appear that the blinking cursor is taller than the line, but it really isn't.

Upvotes: 2

Related Questions