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

66 浏览
0 Comments

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

尝试了各种方法后，我无法摆脱表单上的iOS风格。\n这是我在电脑/Android上的效果\n这是在iPhone 11（iOs 14.x）上的效果\nHTML代码：\n


        
             
     
             
                     
                             
                                     

\n我的CSS：\n

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

\n我还尝试了只使用input{和input[type]{的方法。\n有什么提示可以使效果与Android相同吗？\n谢谢！

0

1 答案

0 Comments

问题的原因是在Safari和iOS上，默认的按钮和表单样式会出现一些不符合需求的效果。解决方法是使用CSS样式来移除默认的按钮和表单样式。

首先，我们可以使用以下CSS代码来移除按钮的默认样式：

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

这段代码会将按钮的边框样式设置为直角，并且移除浏览器默认的外观样式。

接下来，我们还可以使用以下CSS代码来修改按钮的背景颜色：

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

这段代码会将文本输入框、按钮和提交按钮的背景颜色设置为灰色。

在HTML代码中，我们可以使用以下代码来创建表单和按钮：


    

         
         
         
         
         

以上就是如何在Safari和iOS上移除默认按钮和表单样式的方法。通过使用上述的CSS样式和HTML代码，我们可以达到移除默认样式并自定义按钮样式的效果。

0