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

【问题标题】：How to remove Default Button and Form Styling on Safari / iOS?如何删除 Safari / iOS 上的默认按钮和表单样式？
【发布时间】：2021-03-03 07:03:30
【问题描述】：

搜索并尝试了所有方法后，我无法摆脱表单上的 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 相同的结果吗？

谢谢！

【问题讨论】：

stackoverflow.com/questions/22874336/… stackoverflow.com/questions/5449412/…
@quantumPuter 谢谢你非常有建设性的回答。您能否指出我应该使用我尚未在我的 CSS 中尝试过的部分？干杯

标签： css ios iphone button

【解决方案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>

【讨论】：

谢谢！我刚刚尝试过，结果如下：i.ibb.co/hHxKDnq/barcode.png 代码似乎做了一些事情！没有更多的圆边和良好的位置，但按钮是空的？
按钮为空是什么意思？您看不到“SE LIBERER”文字吗？
是的！页面背景是黑色的，按钮应该是这样的灰色吧？（android截图）i.stack.imgur.com/qJd7O.jpg这就是为什么我觉得按钮有点……透明？
现在看看。请编辑您的问题，以更清楚地说明您希望按钮的外观。用文字代替图片。另外，提供使页面变黑的 HTML 代码。