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

Question

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

这是我在 PC / Android 上的内容

在 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：

<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>

我也只尝试了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>