I have added CSS style to the submission button form my web form. However, while it looks as I hoped it would on my laptop – I tried both Safari and Chrome and the button appeared the same – the mobile button is not properly shaped and not colored correctly.
Relevant HTML:
<html>
<body>
<form action="{{ post somewhere }}" method="post">
<strong>+1</strong><input name="number-form" placeholder="4045553829" id="number-input" maxlength="10" type="text" onkeypress="return onlyNumbers()"></input>
<input type=submit value="verify number" class="submit-button"></input>
</form>
</body>
</html>
Corresponding CSS:
body {
background-color: #fff;
display: block;
position: absolute;
height: auto;
width: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 100px;
margin-left: 0px;
}
form {
width: 650px;
margin-left: auto;
margin-right: auto;
}
strong {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 2em;
padding-right: 10px;
}
input, #number-input, #veriform {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 2.5em;
color: #181818;
}
#number-input {
width: 260px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #a8a8a8;
}
.submit-button {
background-color: #8a50c9;
color: #fff;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
border: none;
}
I have created a JSFiddle – at http://jsfiddle.net/rpE3w/1/ – so it can be viewed in browser.
While on a PC the button is a solid-purple rectangle with white lettering, viewing it on a mobile browser seems to yield a rounded, gradient button.
Many thanks in advance.
It appears that I am not the only one who has had this problem CSS submit button weird rendering on iPad/iPhone.
As Francesco points out, this is a rendering error done by iOS devices, and to disable the button modifications I just need to add
to any classes or ids I do not want to be rendered irregularly.