Enlarge the font size without changing the location of the input field

Imagine having an input field with a set height of 25px. If you decide to increase the font size within that text field, even though the dimensions remain constant, it may seem like extra padding has been added. Initially, at a normal font size, it appears like this:

BEFORE

https://i.stack.imgur.com/i5AP3.gif

Now, when the font size is increased, it gives the impression that additional padding has been inserted, similar to this:

AFTER

https://i.stack.imgur.com/wSb3f.gif

Despite checking the padding during debugging and attempting to apply box-sizing:border-box, the issue persists unchanged. Any assistance in resolving this matter would be greatly appreciated. Thank you.

You can easily replicate this scenario by adjusting the font-size.

<body>
  <div>
    <input type="text" value="HI"/>
    <input type="text" value="HELLO" style="font-size: 900px; height: 30px; width: 100%;"/>
    <input type="text" value="HI"/>
  </div>
</body>
htmlcss

Answer №1

To reset the vertical-align property, simply adjust it as needed.

The default value is baseline, with line-height being equal to font-size if left unchanged.

For a visual example using the vertical-align property:

input {
  vertical-align:middle;
  }

/* see div middle center. Note: the tallest input sets the line-height for that specific line */
div {
  background:linear-gradient(to top,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%) ,linear-gradient(to left,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%);
<div>
    <input type="text" value="HI"/> text
    <input type="text" value="HELLO" style="font-size: 90px; height: 30px; width:50px;"/> text
    <input type="text" value="HI"/>
  </div>

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

Hover over buttons for a Netflix-style effect

https://i.stack.imgur.com/7SxaL.gif Is there a way to create a hover effect similar to the one shown in the gif? Currently, I am able to zoom it on hover but how can I also incorporate buttons and other details when hovering over it? This is what I have ...

javascripthtmlcssreactjs

Leveraging CSS to automatically number nested sections

Assume we have an example HTML or XML document structured like this: <body> <section> <h1>This should be numbered 1</h1> <section> <h1>This should be numbered 1.1</h1> <p>blah& ...

htmlcsscss-counter

Why does my Node.JS Express request return undefined after submitting a post request from a form?

Having trouble retrieving data from an HTML form using Node.JS/Express. The req.body seems to be empty, returning an undefined value. Node const express = require('express') const bodyParser = require('body-parser') const app = express ...

htmlnode.jsexpresspostundefined

Providing a user with a special discount tailored to their email address?

<script type="text/javascript"> function updatePrice() { var price = document.getElementById("product").value; var size_price = document.getElementById("size").value; var a=parseInt(price);//parsed type price var b=parseInt(size_price);//pa ...

javascripthtml

Image floating gracefully in the top corner of the screen

Check out this Picture I am trying to create a floating image similar to the one in the top left corner of the navigation bar. After searching for some code to achieve this, I came across the following: <html> <head></head> <bod ...

htmlcss

What is the best way to trigger the onclick event before onblur event?

I have two elements - an anchor with an onclick function and an input with an onfocus event. The anchor is toggled by the input button; meaning, when the button is in focus, the anchor is displayed, and when it loses focus, the anchor is hidden. I'm l ...

javascripthtmlajax

Issues arise in mobile Safari when attempting to load JavaScript files, resulting in

Encountering an issue with my Angular app on mobile Safari during the initial load, where it hangs on a blank page for nearly 2 minutes. Interestingly, the app functions perfectly on other browsers, including Mac Safari and iPad Safari. Initially, I suspe ...

javascriptjquerycssangularjssafari

Convert a relative path to an absolute path using the file:// protocol

When I scrape a website with similar html content, I come across the following code: <a href="/pages/1></a> In addition to this, I have access to the window.location object which contains: origin:"http://www.example.org" This allows me to ...

javascripthtmlpath

JavaScript code is failing to render data properly within HTML documents

I am facing an issue while trying to display data extracted from JSON in HTML. Despite my efforts, the data is not showing up on the webpage. I am unsure about what might be causing this error. Any assistance in resolving this matter would be greatly appre ...

javascripthtml

Is it possible to adjust the scroll top position using inline style in angularJS/CSS?

I am working on storing the scrollTop value of a vertical menu in my controller so that I can set it up each time I return to the page for persistent scrolling. Does anyone know how I can achieve this? This is the code snippet I am currently using: < ...

htmlcssangularjs

What's causing the excessive amount of white space in my image?

Whenever I include a picture of myself on the page, it creates excessive white space at the bottom. I'm not sure why this happens, but removing the image eliminates the white space. I've attempted adjusting the margins and padding, as well as se ...

htmlcss

Which selector in CSS is applicable for targeting Bootstrap tooltips?

After some experimentation, I've mastered the functionality of Twitter Bootstrap Tooltips and am now focused on customizing their appearance. Previous inquiries into other plugins revealed specific CSS selectors - for example, jScrollPane had a track ...

csstwitter-bootstrapcss-selectorstwitter-bootstrap-3

Execute the JavaScript [ window:print() ] function once the webpage has finished loading along with any

I am facing an issue with my web page that has around 10 Google Analytics charts. I want to trigger a print dialog box once the page is fully loaded, including all the charts and JavaScript. Currently, the problem is that the print dialog box opens after t ...

javascriptjqueryhtmlprintinggoogle-analytics

Harness the power of a NUXT component on a different website

Currently, I have a fully functional NUXT application that consists of numerous pages and components operating in `universal` mode. My challenge now is to render one of these components on a separate static HTML website. Exporting a component from a stand ...

javascripthtmlvue.jsvue-componentnuxt.js

CSS: incorrect text alignment

I'm encountering an error with text-align. I want my text aligned to the left, but it's starting from the center. I've tried to fix it without success. Can someone please review and correct my code? CSS .text { width: 100%; height: ...

htmlcss

Guide on showcasing the values from two text fields with autocomplete suggestions in a third text field

Hey there, I have a search form that takes values from two text fields and combines them to populate a third text field for querying. <form name="form1" method="post" action="" autocomplete="off" oninput="sea.value = password.value +''+ passw ...

javascriptjqueryhtml

The background image is failing to display

I am currently working on a subpage for my website that includes a navigation bar and footer. I am looking to add a background image behind the navigation bar, similar to this design. https://i.stack.imgur.com/j6fDZ.jpg After trying various methods, I at ...

htmlcsstwitter-bootstrap-3

Using JavaScript, add a complex JSON record to a JSON variable by pushing it

I have been attempting to insert a complex JSON data record into a JSON variable using the following code: var marks=[]; var studentData="student1":[{ "term1":[ {"LifeSkills":[{"obtained":"17","grade":"A","gp":"5"}]}, {"Work":[{"obtained":"13"," ...

javascriptjqueryhtmljson

Tips for adjusting alignment in MaterializeWould you like to change the alignment

I have implemented the Materialize framework for my front-end design. Initially, everything looks good when the page loads, but upon returning to the index, there is an alignment issue. Clearing the cookies seems to fix it. Here is how it currently looks: ...

phphtmlcsscodeigniter

The website is failing to extend and reveal content that is being concealed by jQuery

I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am ut ...

javascriptjqueryhtmlcss