'HTML Text Input not working Safari Mobile

I've been stuck on problem of my HTML form working everywhere except Safari on iOS. I've done searching, and tried what others seem to have sometimes fixed it in CSS. However, doesn't work for me.

Here is HTML snippet:

<input type="text" id="first_name" name="first_name" placeholder="First Name*">

And the CSS for the contact-form input:

.contact-form input{
font-weight: 500 !important;
border-radius: 5px;
font-size: 13px;
border: 1px solid #a1a3a6;
background: #f6f7f8;
color: #777 !important;
outline: none;
width: 100%;
padding: 14px;
margin: 10px 0px;   
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
 .contact-form textarea{
font-weight: 500 !important;
border-radius: 5px;
font-size: 13px;
border: 1px solid #a1a3a6;
background: #f6f7f8;
color: #777 !important;
outline: none;
width: 100%;
padding: 14px;
margin: 10px 0px;
margin-bottom: 5px;   
min-height: 200px;
overflow: hidden;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s; 
 }


.contact-form input:focus, .contact-form textarea:focus{
background: #fff;
border-color: #ececec;
}

.contact-form button{
display: inline-block;
background: #111;
color: #fff;
font-size: 14px;
width: 100%;
font-weight: 500;
border-radius: 10px;
padding: 15px 30px 15px 30px;       
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
margin-top: 15px;
}
.contact-form button:hover{
background: #d21e2b;
}

.contact-form label input[type="checkbox"] {
display: block;
}
.contact-form input[type="checkbox"] {
width: 13px;
height: 13px;
padding: 15px;
margin-right:20px;
vertical-align: middle;
position: relative;
top: -1px;
*overflow: hidden;
}
<!DOCTYPE html>
<!-- Form Start -->
                <form class="contact-form" id="contact-form">
                    
                    <div class="col-md-12">
                        <p>All fields marked with * are required</p>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="text" id="first_name" name="first_name" placeholder="First Name*">
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="text" id="last_name" name="last_name" placeholder="Last Name*">
                    </div>
                    <div class="col-md-12">
                        <input type="email" id="email" name="email" placeholder="E-mail*">
                    </div>

                    <div class="col-md-12">
                        <textarea name="message" id="message" placeholder="Message"></textarea>
                    <div class="col-md-12">
                        <div class="center-holder">
                            <button id="submit_msg" type="submit">Send Message</button>
                        </div>                      
                    </div>
                </form>
                <!-- Form End -->
        </html>
htmlcsssafarimobile-safari


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions