Ensure content conforms to font style

I am having trouble with my placeholder text getting clipped inside the input field. It seems to work fine with some fonts like sans serif, but not with the font I am currently using, which is Futura. How can I adjust the input field to properly fit the text?

Currently, it looks like this: https://i.sstatic.net/DMxkH.png

However, I want the 'Search' text to appear without being clipped.

This is what my input code looks like:

<input type="text" class="search-input" placeholder="Search...">

Here is the CSS styling for the input field:

.search-input {
  display: block;
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
  font-family: Futura;
  width: 100%;
  border-radius: 4px;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 0 4px 0 3px;
  border: 1px solid white;
}

For reference, I am using Google Chrome version 87.0.4280.88 on Ubuntu operating system.

htmlcssgoogle-chromefonts

Answer №1

It appears that the solution is as follows:

.search-input::-webkit-input-placeholder {
  line-height: 200%;
  /* ... or possibly more */
}

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

How to stop JSX from compressing white space

It seems that jsx automatically condenses multiple whitespace characters into a single space. I am looking for a way to maintain the original text, including all whitespaces, when rendering. I currently have a solution in place, but I'm not completel ...

javascripthtmlreactjsjsxwhitespace

IE compatibility with CSS2 selectors

Is there a plugin, preferably jQuery, that can enable the use of CSS2 selectors like 'parent > child' and 'element:first-child' in my stylesheet for IE6, which doesn't seem to support them natively? ...

javascriptjquerycsspluginscss-selectors

Struggling to format a responsive CSS background image

I'm facing an issue with setting responsive dimensions for a background image within a div that displays differently on mobile. Currently, I am manually specifying the width and height, but I want to avoid doing so. When I try using 100% for the width ...

htmlcss

Is there a way to retrieve the original value of the substr value?

I successfully retrieved the correct value using the substr() method, but I am facing difficulty in getting back the original value. Can someone please guide me on how to achieve this? For example: "AAAAAA" -> AA... but I am unable to revert from AA.. ...

javascriptjqueryhtml

"Create a function that allows for the dynamic addition of elements to a

I want to dynamically add more li elements, similar to the first one, by simply clicking a button. Unfortunately, the example provided on jsfiddle is not functioning as intended. document.onload = init; function init(){ document.getElementById('a ...

javascripthtml

A guide on how to perfectly center a <ul> element on a webpage

After creating a ul element, I have customized the html and css for my navigation bar: Html: <ul id="list-nav"> <li><a href="Marsrutas.html">Item1</a> </li> <li><a href="Nuotraukos.html">Item2</a& ...

jqueryhtmlcsshtml-listsnavbar

The disappearance of the "Event" Twitter Widget in the HTML inspector occurs when customized styles are applied

Currently, I am customizing the default Twitter widget that can be embedded on a website. While successfully injecting styles and making it work perfectly, I recently discovered that after injecting my styles, clicking on a Tweet no longer opens it in a ne ...

javascripthtmlcssreactjstypescript

Which specific HTML5 video event is triggered when the current playback time of the video is updated?

My goal is to give users the option to skip the preroll ad after a specified time (e.g. 5 seconds into the ad) and then transition to playing the regular video content. How can I make this happen? Below is an outline of my current approach: var adManager ...

javascriptjqueryhtmlhtml5-videomedia-player

Error: An uncaught exception occurred when trying to access a seekable HTML5 audio element, resulting in an IndexSize

While trying to utilize the HTML5 API along with SoundManager2, I encountered an issue. My goal was to determine the duration of a song in order to create a progress bar that would update as the song played. However, every time I attempted to retrieve the ...

javascripthtmlflaskhtml5-audiosoundmanager2

Manipulating the distinct look of the final element in an *ngFor loop

I am trying to enhance the appearance of the last line of controls generated by an iterator by making it disabled and somewhat invisible. Currently, my code is functioning well, as shown below. <div *ngFor="let item of data; let last = last;"> &l ...

htmlcssangular

Leverage Javascript to interact with a complex Select HTML element through automation

Having some trouble navigating a Kelley Blue Book page on Chrome using JavaScript in the Console, specifically with the "make" dropdown. My ultimate goal is to choose a make and model before proceeding by clicking the next button. Here's a snippet of ...

javascripthtmldom-eventsgetelementsbyclassname

Switch up the border color of the input in PrimeNG

Currently, I am utilizing PrimeNG with Angular and seeking to modify the shadow of the input box upon focusing it. Presently, it appears as follows: https://i.sstatic.net/o4eLw.png My preference is to change that blue portion to green. Upon reviewing the ...

cssangularprimeng

React JS - application not occupying the entire screen dimensions

I'm currently utilizing React JS and have organized my components as follows: nav div section In the respective folders: (Folder: Navbar.js, Navbar.scss) (Folder: MyDivSection.js, MyDivSection.scss) (Folder: MySection.js, MySection.scss) All these ...

javascripthtmlcssreactjssass

Eliminating Div from the mobile display

Looking to have my carousel removed from mobile view. I managed to hide it using a media query, but the images still load in the background. Is there a jQuery solution to completely remove the code when viewed on mobile devices? ...

javascriptjquerycssmedia-queries

The use of the Image (img) tag results in a 404 error and the display of

Image displayed <img src="https://img.youtube.com/vi/Q9p-UGqlRMg/mqdefault.jpg"> I attempted this (It works with other 404 image URLs, but not with youtube thumbnail URL) $('img').on('error', function() { $(this).at ...

javascripthtmljqueryajax

Unlimited scrolling with external JSON data in AngularJS

I am struggling with implementing an infinite scroll in angularjs using a JSON file from an external site. I want the infinite scroll to trigger when the posts variable reaches 10, then call my function, increment the URL by +1, and load a new page. Here i ...

htmljsonangularjs

Unable to delete route with NodeJS using Express

Currently, I am diving into the world of CRUD basics by setting up simple routes from my HTML5 document to a Postgres database. While my GET and POST buttons are functioning as expected, I've encountered an issue with my DELETE button not removing dat ...

node.jshtmlpostgresqlexpresscrud

The Alert Component fails to display when the same Error is triggered for the second time

In the midst of developing a Website using Nuxt.js (Vue.js), I've encountered an issue with my custom Alert Component. I designed a contact form on the site to trigger a specialized notification when users input incorrect data or omit required fields ...

javascripthtmlcssvue.jsnuxt.js

Tips for creating a custom vertical grid layout in Bootstrap with specific item placements

I've been on a quest to find a method to display a bootstrap column vertically instead of horizontally. I am adamant about not using masonry or any other external library. My goal is to have "Card 2" appear beneath "Card 1" on medium to small screens ...

csstwitter-bootstrapbootstrap-4

Different Div Sizes Based on Device Type (Bootstrap)

I am currently working on a Bootstrap 3 website and have several small divs displayed on the page. I want to adjust their size for desktop view and make them full width for mobile view. Here is my approach: I attempted to place each small div within a co ...

htmlcsstwitter-bootstrap