CODEWITHSUNDEEP
htmlcssgoogle-chromefonts
Rorschach
Rorschach

Reputation: 32446

Force input to fit font

My placeholder text is being clipped inside the input. It works fine with certain fonts, eg. sans serif, but not with the font, Futura, I'm currently using. How can I fit the input field properly around the text.

I'm seeing this, enter image description here

but want the 'Search' to appear unclipped.

Input:

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

Css:

.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;
}

Specs: Google Chrome 87.0.4280.88 on Ubuntu

Upvotes: 0

Views: 78

Answers (1)

Mister Jojo
Mister Jojo

Reputation: 22345

solution seems to be:

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

Upvotes: 1

Related Questions