Search code examples
iphonecssformswebkit

CSS Changes Don't Seem to Show in iPhone Browser (Mobile Webkit/Safari)


I have a mobile webpage that is just a simple form with a submit button.

I have just tried to make the submit button bigger in the css file and also inline on the submit button itself and it doesn't show.

If I use the Ripple extension for Chrome it shows in there (but Ripple doesn't have the exact look of the iPhone form elements yet).

I was wondering if this is a known issue - i.e. incase the browser removes styling from submit buttons etc. or if it is something that I am doing wrong.

The line in question is simply:

<input type="submit" value="Submit" class="submit" style="text-align: center; width:30%; height:50px; "/>

Solution

  • The height rule won't apply to the button unless you specify "border: 0". However, you'll lose the default styling of the button, but you can get the styling back with your own CSS.

    Not sure if you're trying to get the submit button centered in the form - but if you are, you should set the button to "display: block" and then add "margin: 0 auto". The text-align rule isn't necessary.