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

Question

What I want

Chrome On Chrome, the input text looks normal.

What is happening

Firefox

Safari

As you can see, the input text is being slightly cut off at the bottom on Firefox and majorly cut off on Safari. How can I fix that?

If anyone could help w/ this it would be greatly appreciated!

Code

HTML

        <div class="row page-header">
            <div class="col-xs-10">
                <div class="form-group">
                    <input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here"> </div>
            </div>
        </div>

CSS

/*Add borders when hover or click on input boxes*/
input[type="text"] {
    outline: none;
    box-shadow:none !important;
    border: 1px solid white; /*make the borders invisble by turning same color as background*/
}

input[type="text"]:hover, input[type="text"]:focus{
    border: 1px solid #cccccc;
    border-radius: 8px;
}

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

input[type='text'][name='Worksheet-Problem']{
    font-size: 20px;
}

/*Change placeholder*/
input[type='text'][name='Worksheet-Name']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-weight: 500; 
    font-size: 36px;
}
input[type='text'][name='Worksheet-Name']::-moz-placeholder { /* Firefox 19+ */
    font-weight: 500;
    font-size: 36px;
}
input[type='text'][name='Worksheet-Name']:-ms-input-placeholder { /* IE 10+ */
    font-weight: 500;
    font-size: 36px;
}
input[type='text'][name='Worksheet-Name']:-moz-placeholder { /* Firefox 18- */
    font-weight: 500;
    font-size: 36px;
}

/*Change placeholder*/
input[type='text'][name='Worksheet-Problem']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-weight: 400; 
    font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']::-moz-placeholder { /* Firefox 19+ */
    font-weight: 400;
    font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']:-ms-input-placeholder { /* IE 10+ */
    font-weight: 400;
    font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']:-moz-placeholder { /* Firefox 18- */
    font-weight: 400;
    font-size: 20px;
}

JSFiddle

Solution 1

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"/>?

Solution 2

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

input::placeholder {
  overflow: visible;
}

Solution 3

Fixed this with line-height:1 on the input

Solution 4

The cause is placing the line-height on the placeholder, if you remove that then it will no longer be cut

View more solutions

Comments

[Jonathan Laliberte]

that worked for me. Had to give it line-height:160%; thanks!!