Why can't IE type in form?

user_14537880 0
Viewed 41

My form for the website I'm designing is working fine on Firefox, Edge, and Chrome. But on IE, I can't see the placeholder text and when I try to type, it doesn't show any thing. When I remove the CSS file, then I can see the placeholder text and whatever is typed in the form.

Somethings wrong with the CSS but I'm not sure what:


/* Style place holder text and let it show CSS effect upon focus */
.contact-us input[type="text"],
.contact-us input[type="email"],
.contact-us input[type="url"],
.contact-us textarea
{
  -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    width: 100%;
    display: block;
    outline: none;
    border: none;
    height: 1em;
    line-height: 1em;
  font-size: 0.8em;
    font-family: Arial, sans-serif;
  color: grey;
    padding: .7em 0;
}
.contact-us input[type="text"]:focus,
.contact-us input[type="email"]:focus,
.contact-us input[type="url"]:focus,
.contact-us textarea:focus {
  padding: 2%;
}
css html
1 Answers

I found the answer on this thread after searching some more. Apparently there's something in the CSS framework that sets the height on all inputs to 2.4375rem and it needs to be overridden with something like:

.contact-us input[type="text"],
.contact-us input[type="email"],
.contact-us input[type="url"],
.contact-us textarea
{
    height: auto;
}
user_145378800
Related