How can I make my HTML form button look identical in mobile and desktop browsers?
Question
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.
3 answers
solution1
4 2013-01-14 22:10:25
You could roll your own with a clickable image instead of an input. Between Mac, Windows, Linux, Android, iOS, Windows Mobile and Blackberry, if you give the browser any choice in what the button looks like, it won't look the same in all browsers. An image will be more consistent.
solution2
1 ACCPTED 2013-01-16 21:38:35
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
-webkit-appearance: none;
to any classes or ids I do not want to be rendered irregularly.
solution3
0 2020-06-11 18:23:55
Not exclusively iOS devices either. Android devices - at least those using Chrome and Firefox - have similar rendering behavior for buttons.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.