CODEWITHSUNDEEP
htmlcssfirefoxsafari
14wml
14wml

Reputation: 4166

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

What I want

Chrome enter image description here On Chrome, the input text looks normal.

What is happening

Firefox enter image description here

Safari enter image description here

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

Upvotes: 8

Views: 15648

Answers (4)

Dmitry Sobolevsky
Dmitry Sobolevsky

Reputation: 1191

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

input::placeholder {
  overflow: visible;
}

Upvotes: 11

user3196599
user3196599

Reputation:

Fixed this with line-height:1 on the input

Upvotes: 5

Malte Schulze-Boeing
Malte Schulze-Boeing

Reputation: 1145

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

Upvotes: 4

Brandon
Brandon

Reputation: 66

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

Upvotes: 5

Related Questions