Fix iphone on the Safari browser submit button fillet bug

Today in the company wrote a login page effect, let me encounter a strange problem-"input type=submit in the form and the input Type=reset button in the iphone's Safari browser in the corner has a bug" is very confused, so collected and collated, Let me briefly describe the appearance of this bug.

Since I finished the last few pages of the iphone, I have not made the iphone page effect, today I wrote a login page in the company effect, let me encounter a strange problem-" input[type=" in the form "Submit" and Input[type = "Reset" button has a bug in the corner of the iphone's Safari browser. "

Android

Ios

But the code above is in the iphone's Safari browser under the beginning of the problem stated. It is really bad how to solve the problem, because never touched, so it has not been met. But the problem, we will find a way to solve, so in GG search "input submit for IPhone", and really found the problem. Keir Whitaker the content described in styling Submit Buttons for Mobile Safari is exactly the same as the problem I encountered, by adding it in the style as follows:

The code is as follows:

. Form-actions input {...-webkit-appearance: none;}

Update to iphone A look, really cool, the problem solved.

The problem here is that the Safari parsing input[type= "Submit" and the input[type= "Reset" button on the iphone will be rendered in the default UI of the Apple browser, so that the image I have just now appears, We explicitly set the fillet value of the button in the style, but it doesn't work on the iphone safari. In order for him to take effect, it is necessary to explicitly nominate the style:

So what effect does "-webkit-appearance" have on button? You can refer to the following:

The effect that is displayed is set by the button:

Obviously tell us, in the different "-webkit-appearance" selected value case, the button renders the effect is not the same, the detailed test code you can use the Safari browser click here. There is a detailed introduction to "-webkit-appearance", this is known, and finally I suggest that we can directly in the "RESET.CSS" style file to add such a sentence:

The code is as follows:

{-webkit-appearance: none;}

This would not be a headache for such a problem.

If you haven't met, or you're developing a mobile web, you'll want to remember this tip, because when you're in the middle of a problem, you don't scratch your scalp and solve your problem. Finally, I hope you like this article, if you feel that you have some help, you can recommend to your friends, or have a better share can be in the comments below to give us a message directly.

Fix iphone on the Safari browser submit button fillet bug