Form input fields rendering issue with firefox - html

Question

Would you know why the input fields of my form don't render well on firefox? (no issue with safari).
The issues are (1) the placeholder text is not visible with firefox (except for the message field) and (2) when you type something in these fields (name, email, etc) it is not visible.
Thanks for your help
See https://jsfiddle.net/qr0nvov9/
<section>
<div class="container">
<div class="row">
<div class="col-md-3 bordering">
<h2>Nous <b>contacter</b></h2>
<h3>A votre service</h3>
</div>
<div class="col-md-8 right-content">
<p>Toute l'équipe...</p>
<div class="grid-item contact-form">
<div class="inner">
<form id="form" action="/php/mail.php" name="form">
<div class="row">
<div class="col-md-6">
<input placeholder="* Your name" name="name" required type="text" class="form-control">
</div>
<div class="col-md-6">
<input placeholder="* E-mail" name="email" required type="email" class="form-control">
</div>
<div class="col-md-6">
<input placeholder="Phone number" name="phone" type="text" class="form-control">
</div>
<div class="col-md-6">
<input placeholder="Website" name="website" type="text" class="form-control">
</div>
<div class="col-md-12">
<textarea placeholder="* Message" name="message" required class="form-control"></textarea>
<button id="send" type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

add this downstream of your styles
form-control, .input-group-addon, input[type="number"] {
padding: 10px; /*just roughed this in*/
box-sizing: content-box;
}

Answer 2

Check this : https://jsfiddle.net/qr0nvov9/5/
replace this with old css:
.form-control,
.input-group-addon,
input[type=number] {
background: #CEF6DC;
border: 0;
border-bottom: 1px solid #2e2e2e;
border-radius: 0;
box-shadow: none;
padding: 0px 10px;
font-weight: 400;
margin-top: 10px;
color: #2e2e2e;
-webkit-transition: all .3s;
transition: all .3s;
height:50px;
}
input:active,
input:focus,
textarea:active,
textarea:focus {
outline: none!important;
box-shadow: none!important;
border-color: #2e2e2e!important;
/* background: #2e2e2e; */
padding: 0px 21px;
color: #2e2e2e!important
}