The text that follows the cursor seems to stand out taller than the rest

When I type words in a textarea input field, the cursor seems to be taller than it should be (as shown below). What is causing this issue and is there a way to make it as tall as the words with a font size of 38px?

Here is 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>

Below is an illustration of the issue:

I am using the Chrome browser. Any assistance in resolving this problem would be greatly appreciated.

htmlcss

Answer №1

When wondering why the blinking cursor seems larger than the text, it's due to an optical illusion. The cursor is actually the same height as the full line of text. Keep in mind that the descenders on letters like g, j, p, q, and y also contribute to this perceived difference. Although it may seem otherwise, the blinking cursor is not taller than the rest of the text.

Answer №2

It appears that the issue has most likely been resolved, as it was from three years ago. However, after reading comments suggesting there was an optical illusion problem (due to the cursor being the same size as the line), I managed to solve my problem by using:

line-height: 27px;

within my input field.

Hopefully, this information may be of assistance to someone in the future! 😃

Answer №3

The typeface plays a crucial role in this matter, so please experiment with editing in these three designated text sections:

<textarea name="quotes" cols="40" rows="1"   placeholder="Share your favorite quote here" 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="Share your favorite quote here" style="height:60px;width:99%;overflow:auto;border: 1px solid silver;font-size:38px;font-family:fantasy" keynav:shortcut="10">text 2</textarea>
<textarea name="quotes" cols="40" rows="1"   placeholder="Share your favorite quote here" style="height:60px;width:99%;overflow:auto;border: 1px solid silver;font-size:38px;font-family:cursive" keynav:shortcut="10">writing 3</textarea>

You'll notice that the cursor behaves differently in each textarea - appearing normal in the first one, taller below in the second, and taller above in the third. Here is the link to the demonstration on Codepen: https://codepen.io/lerner-zhang/pen/ExregOd

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding event listener to a dynamically created video element

Could you provide any insight as to why I'm encountering an error message "Can't create event listener on null" when using the following code: var my; my.newVidObj = document.createElement('video'); my.newVidObj.src = "vid- ...

javascriptjqueryeventshtmlvideo

issue with selecting tabs in jquery

I need help with a problem that is connected to my previous article on CSS, button selection, and HTML tags. You can find the article here. I am not very proficient in JavaScript, so I would appreciate any insights or guidance on how to tackle this issue. ...

javascriptasp.nethtml

Guide to making a JavaScript button that triggers an iframe to open upon user clicking the button

I'm currently enhancing the comment section for posts on my website. I am looking to implement a button in javascript that, when clicked, will open an iframe window displaying comments similar to how Facebook does on their post. If there are other lan ...

phpjavascripthtmliframe

Tips for utilizing the router instance on a different HTML page within the Backbone JS framework

I'm new to Backbone JS and still learning its intricacies. In main.js, I have created a router class that is included in index.html. I've also created an object of that router class associated with the same HTML page. However, when I redirect t ...

javascriptjqueryhtmlbackbone.jsbackbone-routing

Display a button within a table depending on the content of adjacent cells

Below is the code snippet I'm currently working with: <tbody *ngIf="packages"> <tr *ngFor="let package of packages"> <td class='checkbox'> <label class="css-control css-co ...

javascripthtmlangular

Display a Bootstrap input button group addon, where the first button has rounded corners only after the second button has been hidden

I am working on a button group and need to hide the second button dynamically. However, I am facing an issue where the first button has a 90° border. How can I adjust the code below to display button 1 with a rounded border? If I decide to hide "button ...

javascriptjqueryhtmlcssbootstrap-4

What are the steps for incorporating a personalized background in Autodesk Forge?

Is it possible to set an image as the background? I am trying to achieve this but so far, I have only been able to do the following: viewer.setLightPreset(4); viewer.setQualityLevel(false, false); viewer.setGhosting(true); viewer.setGroundShadow(true); vi ...

cssautodesk-forgeautodeskforgeautodesk-viewer

How about this: "Unveil the beauty of dynamically loaded

var request = new Request({ method: 'get', url: 'onlinestatusoutput.html.php', onComplete:function(response) { $('ajax-content').get('tween', {property: 'opacity', duration: 'long&apos ...

javascriptajaxhtmlmootoolsfade

Having trouble getting the JavaScript slider to animate

My code works perfectly in Codepen but when I try to implement it on my website, it shows as a static image. You can view the code here: https://codepen.io/anon/pen/zPMKpv I'm using the exact same code on my website located at: Does anyone have any ...

javascripthtmlcss

Guide on altering the cell's background hue depending on its value through javascript

I'm dealing with a table that has 3 columns: field1 is a Category field2 and field3 contain Measures (specifically integers 1, 2, 3, 4, and 5). Is there a way to use Javascript to conditionally format the background color of cells in the table hol ...

javascriptphphtmlcssformatting

Positioning Google Chart in HTML

I'm attempting to arrange three distinct Google pie charts in a horizontal layout. At present, I have applied inline CSS for formatting purposes. Oddly enough, the third chart always ends up on a separate line. Could anyone kindly point out my error? ...

htmlcss

Display flash messages consistently in a designated area on the webpage instead of appearing at the top of the page in Flask

{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %} <div class="alert alert-{{ category }}" style=" ...

pythonhtmlcssflask

Tips for utilizing jQuery to identify an image that is being hovered on?

Concept My goal is to create an effect where a user hovers over an image and a transparent overlay div appears on top of it. This overlay div starts with a height of 0px and should increase to half of the image height upon hover. The hover functionality ...

javascriptjqueryhtmlcss

Identify the externally-sourced element of interest

I'm attempting to apply a ScrollReveal effect to an element loaded from a separate html file called "header.html". Unfortunately, the ScrollReveal animation is not working on this particular element, while other elements within my index.html are funct ...

javascriptjqueryhtmlscrollreveal.js

The favicon appears broken upon opening a new tab

Usually, I use a favicon PNG file for my website. It works perfectly and I can see my favicon on the browser tab. However, when I open a PDF document in a new page from my Angular app, I notice that there is a broken icon on the browser tab. Here is how I ...

javascripthtmlcssangularfavicon

How should white space be managed in Bootstrap 4 cards when incorporating responsive column classes - wrap elements inside divs or apply classes directly?

In Bootstrap 4, when applying a responsive column class like "col-sm-8" directly to a "div" with the class "card", whitespace is added between the card border and content. This can be seen in the highlighted yellow area in the image below. https://i.sstat ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Divide information in the chart

<table id="tab"> <tr><td class="sub">mmmmm</td><td class="sub">jjjjj</td></tr> <tr><td class="sub">lllll</td><td class="sub">wwwww&l ...

javascriptjquerycss

Is it possible for the binding model of Mat-Checkbox to be optional or null?

Greetings everyone! I am a newcomer to the world of Angular, where I have successfully created a dynamic list of checkboxes. However, I have encountered a challenge when trying to bind selected values from an API to these checkboxes. <div *ngFor="let b ...

javascripthtmlangulartypescript

JavaScript error occurring when trying to validate Ajax response

I am attempting to create a report using a dynamically generated form. The form loads successfully through XMLHttpRequest, but the validation for the form fields does not seem to be working. I have experimented with using eval() and found that it only work ...

phpjavascripthtmlajax

What is the reason position:sticky does not align elements to right:0?

I attempted to align my element with the right:0 property, but it doesn't seem to have any effect. The element remains stuck to the left edge of the browser window. * { margin: 0; padding: 0; font-size: 50px; } .sticky { width: 50px; h ...

htmlcsscss-positionsticky