Font with italic style cut off on edges in input

Now when using custom fonts on a website are very common and popular, you could run into issue when the text in input or textarea is cut off or simply doesn’t fit in the area.

Let’s consider this example where the font-style for the input is italic.

As you can see, the part of the letter is outside of the input. To fix  this we can use padding.

That was easy, right? So let’s now go, and focus on that input:

Oops. That’s not good. And no matter how much padding you will add, the letter “p” will always stay cut. And once focus is gone, the text is fully visible again.

So what now? text-indent to the rescue! ;o)

To solve this issue, just add text-indent to the input equal to padding-left and it should work just fine.