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 a PDF generated from an HTML div to an email using Java

I am looking for a solution to convert the contents of an HTML div tag into a PDF file while preserving its associated CSS. This is essential as I will be using Java on the back-end to send emails, and I need to attach the PDF with the CSS intact when send ...

javascriptjavahtmlcssjakarta-mail

Finding your way to a <div data-role="page"> sans the use of an anchor tag

I need assistance with a specific HTML setup. The first div tag in the code below contains a form with a table that has two columns labeled A and B, along with a button. The second div tag holds a text box, dropdown menu, and submit button. When the button ...

jqueryhtmlwindow.location

Guide to executing a batch file using electron

I've been struggling all morning to find a solution. I've gone through several tutorials, but I still can't wrap my head around how this should work. In my Electron app, there is a button that, when clicked, should execute a batch file (hpm ...

javascripthtmlcsselectronelectron-builder

What is the best way to include a line break in a text sourced from a React state?

Here is a functional React code snippet: const about={ text1: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere, qui?', text2: 'eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?&apos ...

htmlreactjs

Unclear value of button when being passed

In my Welcome.html file, I am attempting to send the value of a button to a function that simply logs that value. This function is located in a functions class that has been imported into my welcome.ts file. <ion-content padding id="page1"> <h1 ...

javascripthtmltypescriptionic-framework

`Troubleshooting: Inability to chain selectors for custom styling in Next JS module`

When I chain selectors in a CSS file, the styles don't seem to apply as expected. I'm importing the styles into the component and it only applies for the main class. For example: import styles from './Home.module.css' const Home = () = ...

cssnext.js

Creating a perfect design with Font Awesome 5 SVG icons and vertically aligned text at the top

Check out my code example on CodePen, view source. I'm looking for a way to align an icon and text vertically without using JavaScript. I want to maintain the li element's line-height and other styles. Any suggestions? ...

htmlcssfont-awesome-5

transition-duration is ineffective in a particular div

Whenever I hover over the purple text, I want it to increase in size using the zoom property. Here is an example: I am facing two issues: The time duration does not seem to work even when I try to apply it within the hover and non-hover classes. Wh ...

htmlcss

Display the initial three image components on the HTML webpage, then simply click on the "load more" button to reveal the subsequent two elements

I've created a div with the id #myList, which contains 8 sub-divs each with an image. My goal is to initially load the first 3 images and then have the ability to load more when clicking on load more. I attempted to follow this jsfiddle example Bel ...

javascriptjqueryhtmlcss

Obtain the height and width of the original images from the href and assign them to your attributes using jQuery

Hey there pals, I'm currently on a mission to fetch the dimensions (height and width) of an image from a hyperlink and then insert those values into its attribute. This task has got me going bonkers! Here's my snippet: <figure> <a ...

javascripthtmljqueryeachloadimage

Crafting web design with media queries to ensure responsiveness

I have been working on creating a responsive webpage. While the header and footer are resizing properly when the browser is reduced in size, the navigation section is not behaving the same way. Currently, shrinking the page is causing the navigation block ...

htmlcss

Attempting to divide the main page into quadrants

I want to split my homepage into four equal images without any scrolling. When you click on the website, I want the four images to expand and cover the entire screen with no scrollbars. I've made some progress with my code, but it's not quite the ...

htmlcssimage

Attempting to extract information from a webpage that contains multiple data tables, but encountering an issue where only the first table is successfully scraped

For my current project, I am attempting to extract data from basketball players' profiles on Basketball-Reference. Each player page on B-R contains several tables of valuable information that I need to access. However, when trying to extract the table ...

pythonhtmlbeautifulsoupxml-parsinghtml-parsing

What is the method to modify the text of an element without altering its existing properties?

https://i.stack.imgur.com/cBu6P.png $.ajax({ type: "GET", url: "my url" + x, datatype: "html", success: function(data){ //alert(x); //var Content = data; var sendId ; var data = $.parseJSON(data); ...

javascriptjqueryhtmlajax

Executing animation after the completion of a transition

Is there a way to synchronize the bounce animation with the scaling of an object, so that it appears smooth and fluid? I've tried using the animation delay property along with the transition delay property, but they don't seem to align correctly. ...

javascripthtmlcssanimationscale

Overruled fashion

Here is the HTML code from my custom page: <div class="notes quotes-notification member-savings f-left"> <h2>My Notifications</h2> <ul> <li><b>I need to make some changes in the HTML, different from other pages you have ...

htmlcss

Methods for updating the value of a `<select>` element in an AngularJS controller

Within my HTML code, I have a select element with options ranging from 1 to 10: <select id="selVal" ng-model="product.quantity" ng-options="o as o for o in quantityValues" ng-change="updateDelta(product.quantity, {{product.quantity}}, product.selec ...

javascripthtmlangularjsselectng-options

Error in Google Translate API AttributeError

Despite changing the gtoken on googletrans stopped working with error 'NoneType' object has no attribute 'group', I am still encountering the "AttributeError: 'NoneType' object has no attribute 'group'" error. Howeve ...

pythonhtmlgoogletrans

How can we seamlessly transition from adding a class to setting scrollTop on a particular div?

I have successfully implemented a jQuery script to change the background color of my navbar on scroll. Here's the code I used: jQuery(document).ready(function($) { $(window).scroll(function() { var scrollPos = $(window).scrollTop(), nav ...

jquerycsswordpress

Dividing the webpage background into separate sections to showcase a variety of colors, patterns, and more

I'm in the process of dividing the background on my website into distinct areas. My goal is to have the patterned area extend both horizontally and vertically on either side until it reaches the edge of the visible webpage. Figuring out how to achiev ...

htmlcss