Why does Safari & Firefox cut off bottom of input text?

Guys sometimes proposed solutions don't work with placeholders, here is more powerful approach:

input::placeholder {
  overflow: visible;
}

You can reduce the bottom padding and/or the font size and that will fix your overflow issue.

input[type='text'][name='Worksheet-Name']{
    font-size: 35px;//instead of 36
    margin-top: 20px;
    margin-left: 15px;
}

or

.input-lg {
    height: 46px;
    padding: 10px 16px 0;//change here to have 0
    font-size: 18px;
    line-height: 1.33333;
    border-radius: 6px;
}

also possibly answered here with line-height: Why is Firefox cutting off the text in my <input type="text"/>?


Fixed this with line-height:1 on the input