Support

June 20, 2013 at 10:45 am

Hi there,

I checked and it turns out that what you’re seeing is Mobile Safari’s built-in input element rendering. You can disable it site wide by adding:

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

which will cover all inputs site wide. If you want to target the Next button only, it would be:

.btn_event_form_submit, .inline-button {
  border-radius: 0;
  -webkit-appearance: none;
}

Note, some versions of iOS will need the border-radius set to zero, others will not, so you’ll likely want to test the above out to make sure it works.

As an aside, you might consider changing the width, or even add a min-width to the cancel button. It gets cut off on smaller screens when since its width is set to be 20% of its parent container.

June 20, 2013 at 1:45 pm

You’re welcome.

I’m not sure if this will help with your project, but if you’re on a Mac you can use Safari, with the iPad plugged in, and inspect elements right from the iPad for situations like this:

http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/