如何在 Safari / iOS 上删除默认按钮和表单样式？

Question

在搜索并尝试了所有方法之后，我无法摆脱表单上的 iOS 样式。

Here is what I have on PC / Android

And on Iphone 11 ( iOs 14.x )

HTML代码：

<form method="post" >
        <fieldset style= "border-width: 0px;" >             

        
    <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pone" id="pone" autocomplete="off">&nbsp;
            <input style="font-size : 30px; height:48px; width:50px;" type="text" name="ptwo" id="ptwo" autocomplete="off">&nbsp;
                    <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pthree" id="pthree" autocomplete="off">&nbsp;
                            <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pfour" id="pfour" autocomplete="off">&nbsp;
                                    <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pfive" id="pfive" autocomplete="off">&nbsp;
            
            
            
            <label>
                <INPUT style="width:250px; height:50px; font-size : 30px" class="submit" type="submit" name="envoyer" id="envoyer" value="&nbsp; &nbsp; SE LIBERER &nbsp; &nbsp; ">
            </label><br /><br />
        </fieldset>

还有我的CSS:

input {
border-radius: 0;
}

input[type=text], input[type=button], input[type=submit] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}

我也只尝试了 input{ 和 input[type]{ 此处是否有与 Android 相同结果的提示？

谢谢！

Answer 1

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

}
input[type=text], input[type=button], input[type=submit] {   
    background-color : #D3D3D3;    
}

<form method="post" >
   <fieldset style= "border-width: 0px;" >             
      </label>
      <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pone" id="pone" autocomplete="off">&nbsp;
      <input style="font-size : 30px; height:48px; width:50px;" type="text" name="ptwo" id="ptwo" autocomplete="off">&nbsp;
      <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pthree" id="pthree" autocomplete="off">&nbsp;
      <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pfour" id="pfour" autocomplete="off">&nbsp;
      <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pfive" id="pfive" autocomplete="off">&nbsp;
      </label>        
      <label>
      <INPUT style="width:250px; height:50px; font-size : 30px" class="submit" type="submit" name="envoyer" id="envoyer" value="&nbsp; &nbsp; SE LIBERER &nbsp; &nbsp; ">
      </label><br /><br />
   </fieldset>
</form>

如何在 Safari / iOS 上删除默认按钮和表单样式？

How to remove Default Button and Form Styling on Safari / iOS?

css

iphone

button

ios