Input text bug on Firefox but not Safari or Chrome - html

Question

For some reason my contact form, which worked previously, is not functioning properly all of a sudden. Essentially, the input fields appear to be disabled on Firefox, even though they aren't. Firebug suggests they aren't disabled as well and this behavior only pertains to firefox, not chrome or safari.
HTML
<div class="container-fluid contact-container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-10 col-lg-offset-1">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 footer-contact-h">TELL US ABOUT YOUR PROJECT</div>
<form method="post" id="contact-form">
<div class="col-xs-12 col-sm-12 col-md-offset-2 col-md-4 col-lg-4 form-row">
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" placeholder="Name" required="required" autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 form-row">
<div class="form-group">
<input name="company" type="text" class="form-control" id="company" placeholder="Company" required="required" autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-offset-2 col-md-4 col-lg-4 form-row">
<div class="form-group">
<input name="email" type="text" class="form-control" id="email" placeholder="Email" required="required" autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 form-row">
<div class="form-group">
<input name="phone" type="text" class="form-control" id="phone" placeholder="Phone" required="required" autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<div class="form-group">
<textarea name="message" class="form-control" id="message" required="required" placeholder="Details"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-4 col-lg-2 col-lg-offset-5">
<div class="form-group">
<input class="form-control contact-us-button" type="submit" value="CONTACT US">
</div>
<div class="contact-status">Message Received!</div>
</div>
</form>
</div>
</div>
</div>
I was able to replicate it in jsFiddle: http://jsfiddle.net/tfdcgjh1/

Answer 1

You can solve it, work around, by doing the following in form-control class:
.form-control {
line-height: 1;
height: auto;
-moz-box-sizing: border-box;
}
Checkout the DEMO

Answer 2

The problem appears to be the padding in your .form-group input.
Remove that and the placeholder/text comes back.
Updated jsfiddle