CODEWITHSUNDEEP
htmlcss
Jaye Renzo Montejo
Jaye Renzo Montejo

Reputation: 1862

Why does the text inside an <input> tag get cut off even if there's already a padding?

Ok so I found out that the text inside an <input> tag still gets cut off even though the <input> tag already has a padding. You'll notice it more when you set your font style to anything cursive.

Take a look at this image:

The first text box in the screenshot is an input of type=text and the second text box is just a div. The input text box cuts off the tail of character 'j', while the div text box does not.

HTML:

<input type="text" value="juvenescent" />
<div>juvenescent</div>

CSS:

input, div {
  font-family: cursive;
  font-size: 2em;
  padding: 15px 20px;
  margin-bottom: 10px;
  width: 300px;
  border: 1px solid black;
}

div {
  background-color: white;
}

Here is a link to the jsfiddle: https://jsfiddle.net/9eLzqszx

What would be the workaround here? Obviously, I want the padding of the input text box to NOT cut the text inside it.

Upvotes: 19

Views: 22926

Answers (4)

will
will

Reputation: 2007

It looks like the curve of the J goes past the left-hand side of what the browser considers to be the edge of the letter. Instead of using padding for both sides, use padding for top/right/bottom and instead use text-indent for the left, it should do the trick!

input {
  font-family: cursive;
  font-size: 2em;
  padding: 15px 20px 15px 0;
  font-style:italic;
  margin-bottom: 10px;
  width: 300px;
  border: 1px solid black;
  text-indent: 20px;
}

https://jsfiddle.net/will0220/pxrs321f/3/

Upvotes: 21

R.K123
R.K123

Reputation: 159

Add height: auto; to your input type=text to keep flexibility, and change the padding to get the original effect, like this padding: 14px 20px;

Upvotes: -1

Cosmin Ababei
Cosmin Ababei

Reputation: 7072

An input element is a special element as it needs to cut and allow the user to navigate through its text. Its active text zone isn't increased by the padding, and that's why you're seeing this behavior. Firefox seems to be more clever than the bunch, as it doesn't vertically cut the text if the text's width is smaller than the input's active text zone.

A workaround would be to add text-indent and decrease padding-left:

text-indent: 5px;
padding-left: 15px; /* Originally 20px */

You can see it in a fiddle over here.

Upvotes: 3

Roger Rosenquist
Roger Rosenquist

Reputation: 39

You could try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. However, that's probably a crappy hack if you want it to match the same size as your div.

Upvotes: 1

Related Questions