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.

score 4 · Answer 1 · answered Jan 14 '13 at 22:10

4

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.

answered Jan 14 '13 at 22:10

Corey Ogburn

24,072
31
113
188

Thanks for the answer. Should I be concerned about pixilation, or would I be best off making the background a .SVG file? – zch Jan 14 '13 at 22:28
1

I rarely find the effort and time I put into SVG files worth the results. CSS3 and a div would be just as vector based and probably easier to implement. Personally, a PNG would be enough for me. – Corey Ogburn Jan 15 '13 at 01:34
It is true that having an image may help with something like a button. But I have had issues with more or less all input elements on the iphone. So I guess turning off default appearance on the browser is the better way when you have more than just buttons. – itsols May 22 '18 at 06:20

score 1 · Accepted Answer · edited May 23 '17 at 10:27

1

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.

edited May 23 '17 at 10:27

Community

1
1

answered Jan 16 '13 at 21:38

zch

3,020
4
26
34

Trunk · Answer 3 · 2020-06-23T15:52:59.943

0

Not exclusively iOS devices either. Android devices - at least those using Chrome and Firefox - have similar rendering behavior for buttons.

edited Jun 23 '20 at 15:52

answered Jun 11 '20 at 18:23

Trunk

742
9
24

How can I make my HTML form button look identical in mobile and desktop browsers?

3 Answers3