Отзывчивая форма «Отправить» Button - Мобильная версия

Question

У меня такое сложное время с этим; я уже ломал мой мозг в течение нескольких часов, и я как раз собирался вытащить мои волосы ..

У меня есть форма:

<div class="inforight-contact"> 

<form action="contact-sent.php" method="post" enctype="multipart/form-data" name="form" id="form"> 
<p> 

<label class="input"> 
<span>Name</span> 
<input type="text" name="Name" id="Name" class="name"/> 
</label> 
</p> 
        <p> 
<label class="input"> 
<span>Email</span> 
<input type="text" name="Email" id="Email" class="email" /> 
</label> 
</p> 


<p> 
<label class="input"> 
<span>Subject</span> 
<input type="text" name="Subject" id="Subject" class="subject" /> 
</label> 
</p> 

<p> 
<label for="fileField">Comments:</label> 
<label for="Comments"></label> 
<textarea name="Comments" id="Comments" class="comments" cols="90" rows="4"></textarea> 
</p> 
<p> 
<input type="image" id="submit" class="submit" /> 
</p> 
</form> 

</div> 

Это мой отзывчивый CSS:

form { 
margin-right: 0x; 
margin-top: 20px; 
     } 

form label { 
      display: block; 
      text-align: center; 
      margin-top: 0px; 
      padding-bottom: 5px; 
     } 

form .submit { 
      -webkit-appearance: none; 
      border: 0px; 
      background: #EA5310; 
      width: 100%; 
      border-radius: 0.50em; 
      margin: 0em 0em; 
      padding: 0.7em 1em; 
      box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05); 
      -moz-transition: all 0.35s ease-in-out; 
      -webkit-transition: all 0.35s ease-in-out; 
      -o-transition: all 0.35s ease-in-out; 
      -ms-transition: all 0.35s ease-in-out; 
      transition: all 0.35s ease-in-out; 
      font-family: "Roboto",sans-serif; 
      font-size: 10pt; 
      font-weight: lighter; 
      color: #fff; 
      outline: none; 
      cursor: pointer; 
      display: block; 
      text-align: center; 
      height: 20px; 
     } 





form input.name, 
form input.email, 
form input.tel, 
form input.subject { 
      -webkit-appearance: none; 
      border: 0; 
      background: #f3f4f5; 
      width: 100%; 
      border-radius: 0.50em; 
      margin: 0em 0em; 
      padding: 0.7em 1em; 
      box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05); 
      -moz-transition: all 0.35s ease-in-out; 
      -webkit-transition: all 0.35s ease-in-out; 
      -o-transition: all 0.35s ease-in-out; 
      -ms-transition: all 0.35s ease-in-out; 
      transition: all 0.35s ease-in-out; 
      font-family: "Roboto",sans-serif; 
      font-size: 10pt; 
      font-weight: lighter; 
      color: #777; 
      outline: none; 
      text-align: center; 
     } 


form input.name:focus, 
form input.tel:focus, 
form input.email:focus, 
form input.subject:focus 
      { 
       box-shadow: 0 0 2px 1px #E0E0E0; 
       background: #fff; 
      } 


form textarea.comments { 
      -webkit-appearance: none; 
      border: 0; 
      background: #f3f4f5; 
      width: 100%; 
      border-radius: 0.50em; 
      margin: 0em 0em; 
      padding: 0.7em 1em; 
      box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05); 
      -moz-transition: all 0.35s ease-in-out; 
      -webkit-transition: all 0.35s ease-in-out; 
      -o-transition: all 0.35s ease-in-out; 
      -ms-transition: all 0.35s ease-in-out; 
      transition: all 0.35s ease-in-out; 
      font-family: "Roboto",sans-serif; 
      font-size: 10pt; 
      font-weight: lighter; 
      color: #777; 
      outline: none; 
     } 


form input.comments:focus 
      { 
       box-shadow: 0 0 2px 1px #E0E0E0; 
       background: #fff; 
      } 

проблема в том, что текст кнопки «Отправить» не будет находиться в центре. Он выравнивается: слева. Это выглядит отлично, если я уменьшу свой рабочий стол на экране, чтобы быть мобильным размером, и если я использую что-то вроде Screenfly или адаптивного веб-сайта Firefox, но на моем мобильном телефоне он сидит влево и с белым прямоугольником вокруг текста. Это затрудняет определение проблемы, потому что я вижу проблему только на своем мобильном устройстве. Приложение Firebug перечисляет все мои стили .css и показывает, что он должен сидеть text-align: center, но это не так. Может ли кто-нибудь увидеть что-нибудь, что я не могу? Пожалуйста, дайте мне знать, если вам нужно больше кода.

Answer 1

Замените следующий код:

<input type="image" id="submit" class="submit" /> 

по

<input type="text" id="submit" class="submit" value="Submit" />