Can't get perfectly square submit button on iPhone. Also, button text is not centered

Question

I have a web-based mobile app which uses submit buttons styled with the following CSS class:

.submit_button_green input {
height: 26px;
width: 61px;
border: 0px solid;
font-size: 14px;
color: fff;
background-color: #00CC33;
font-weight: bold;
margin-top: -4px;
text-shadow: 0px 2px 2px #333;
text-align: center;
-webkit-appearance: none;
}

On iPhone 4 (iOS7) corners are still slightly rounded corners and button text is positioned to the right (disappears off the right side of the button). On android devices, button is perfect.

Thank for the help and the button is now perfectly square but the text is still off to the side. Any ideas there? — user3242716, Feb 08 '14 at 22:37
Actually, that slide the text a litter further to the right. I tried text-indent: -9px; and that centered the button on the iPhone but slid it off to the left on the android device. — user3242716, Feb 08 '14 at 22:46
heh, that's weird. I'm out of ideas mate, hope someone else comes for your rescue. Do a search meanwhile. — Nix, Feb 08 '14 at 22:50
Got it! What worked on both was padding-top:4px padding-right:15px — user3242716, Feb 08 '14 at 22:55
that should be padding-top:4px padding-right:2px padding-left:2px and padding-bottom:15px. Thanks for getting on the right track. — user3242716, Feb 08 '14 at 22:58

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

This question has been answered several times already. First set -webkit-appearance to none:

input {
    -webkit-appearance: none;
}

And then set border-radius to 0:

input {
    -webkit-appearance: none;
    border-radius: 0;
}

edited May 23 '17 at 11:58

Community

1
1

answered Feb 08 '14 at 22:33

Nix

500
1
4
19

I had the first (look at the last line of the CSS) but was missing the border-radius part. Thanks that squared up the button corners but the text is still off to the side. Any ideas there? – user3242716 Feb 08 '14 at 22:40
Yes, I just added the comment to your reply above: For that, try setting padding. e.g. padding: 5px 15px; – Nix Feb 08 '14 at 22:43

Can't get perfectly square submit button on iPhone. Also, button text is not centered

1 Answers1