The style on this button isn't displaying on mobile (iOS)

Question

Here is what it looks like on mobile Safari & Chrome (iPhone 5c, iOS8).

This is what it should look like.

The :hover state is working after I tap the button.

Here is my code. Works fine on Chrome on Android 5.1 though. Strange (to me).

 @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); } #feedback-page { text-align: center; } #form-main { width: 100%; float: left; padding-top: 0px; } #form-div { background-color: rgba(72, 72, 72, 0.4); padding-left: 25px; padding-right: 25px; padding-top: 10px; padding-bottom: 10px; width: 450px; float: left; left: 50%; position: absolute; margin-top: 15px; margin-left: -260px; -moz-border-radius: 7px; -webkit-border-radius: 7px; } .feedback-input { color: #3c3c3c; font-family: Helvetica, Arial, sans-serif; font-weight: 500; font-size: 18px; border-radius: 0; line-height: 22px; background-color: #fbfbfb; padding: 13px 13px 13px 54px; margin-bottom: 10px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border: 3px solid rgba(0, 0, 0, 0); } .feedback-input:focus { background: #fff; box-shadow: 0; border: 3px solid #db1d1d; color: #3c3c3c; outline: none; padding: 13px 13px 13px 54px; } .focused { color: #db1d1d; border: #db1d1d solid 3px; } /* Icons ---------------------------------- */ #name { background-image: url(http://rexkirby.com/kirbyandson/images/name.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; } #name:focus { background-image: url(http://rexkirby.com/kirbyandson/images/name.svg); background-size: 30px 30px; background-position: 8px 5px; background-position: 11px 8px; background-repeat: no-repeat; } #email { background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; } #email:focus { background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; } #comment { background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; } textarea { width: 100%; height: 150px; line-height: 150%; resize: vertical; } input:hover, textarea:hover, input:focus, textarea:focus { background-color: white; } #button-red { font-family: 'Montserrat', Arial, Helvetica, sans-serif; float: left; width: 100%; border: #fbfbfb solid 4px; cursor: pointer; background-color: #db1d1d; color: white; font-size: 24px; padding-top: 22px; padding-bottom: 22px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; margin-top: -4px; font-weight: 700; } #button-red:hover { background-color: rgba(0, 0, 0, 0); color: #db1d1d; } .submit:hover { color: #db1d1d; } .ease { width: 0px; height: 74px; background-color: #fbfbfb; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; -ms-transition: .3s ease; transition: .3s ease; } .submit:hover .ease { width: 100%; background-color: white; } @media only screen and (max-width: 580px) { #form-div { left: 3%; margin-right: 3%; width: 88%; margin-left: 0; padding-left: 3%; padding-right: 3%; } } 

 <div id="form-main"> <div id="form-div"> <form action="//formspree.io/emailemailemail@gmail.com" method="POST" class="form" id="form1"> <p class="name"> <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" /> </p> <input type="text" name="_gotcha" style="display:none" /> <p class="email"> <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" /> </p> <p class="text"> <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea> </p> <div class="submit"> <input type="submit" value="SEND" id="button-red" /> <div class="ease"></div> </div> <input type="hidden" name="_next" value="{{store_url}}/page/thanks" /> </form> </div> 

Answer 1

You should add the following to your #button-red styles:

-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;

This should override any iOS specific browser styles for the button. There may be some existing CSS definitions in included CSS files, so for debugging purposes you might try to use the !important statement.