CODEWITHSUNDEEP
cssfirefox
magician11
magician11

Reputation: 4584

Why cannot I view input text in the Firefox browser?

When I go to http://128.199.58.229/landingpage/ in Chrome and Safari I can read the placeholder text and see the text I input.

In Firefox I don't see any input text.

When I change the padding..

.form-control {
color: #A1A1A1;
font-size: 16px;
padding: 0;
}

I can see the text.. but of course the padding is terrible now. Any fix for this?

Thanks

Upvotes: 0

Views: 461

Answers (3)

Gold Pearl
Gold Pearl

Reputation: 2024

Problem was height,Your padding is too much

CSS

.form-control
{
height:100%;
padding: 10px;
}

Upvotes: 0

misterManSam
misterManSam

Reputation: 24692

Change the .form-control to box-sizing: content-box and provide a smaller padding value.

Like this:

.form-control {
    color: #A1A1A1;
    font-size: 16px;
    padding: 10px;
    box-sizing: content-box;
}

Currently, the box-sizing: border-box property is combining the padding with the height and creating unexpected results in Firefox.

box-sizing is explained nicely over here on CSS Tricks

Upvotes: 2

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4089

Instead of disturbing padding change the height to 54px

.form-control {
color: #A1A1A1;
font-size: 16px;
height: 54px;
}

Upvotes: 0

Related Questions