删除移动Safari（iPhone）上的textarea内部阴影

128

默认情况下，Mobile Safari似乎将顶部内部阴影添加到所有输入字段，包括textarea。有没有办法删除它？删除移动Safari（iPhone）上的textarea内部阴影

当你有一个白色的背景，这是特别丑陋。

2010-06-17 Lyon

288

通过添加此CSS样式：

-webkit-appearance: none;

来源

2010-06-20 05:49:31 Lyon

+21

添加上输入类型复选框，单选按钮，选择该属性时，因为它隐藏了复选框和单选按钮注意） – 2012-11-02 16:11:09

+12

感谢您的回答里昂。顺便说一句，使用它的最好方法是仅将它应用于'textarea，input [type =“text”]，input [type =“submit”]'。 – jgthms 2013-09-05 15:19:09

也不要将此属性应用于'select'元素，因为它看起来像正常输入文本。 – Bobby 2013-12-17 04:25:50

-28

设置要么input标签background和border CSS属性也似乎工作。

试试这个：

<style> 
input { 
    background: #ccc; 
    border: none; 
} 
</style> 

<form> 
First name: <input type="text"/><br /> 
Last name: <input type="text" /> 
</form>

来源

2010-06-20 05:56:42 MTS

错误和误导。请在发布前在正确的设备上测试您的代码... – Ariel 2011-01-07 04:33:51

真的是错误的答案，没有关于它是什么OP询问 – Jacta 2014-06-18 10:12:54

同时加入了CSS样式

-webkit-appearance: none;

会的工作，它摆脱了一切。你可能想试试这个：

box-shadow: none !important;

这样你就保持向下箭头。

来源

2014-02-27 23:24:23

只需添加box-shadow属性不起作用。内部阴影仍然显示在iOS上的Safari。 – silentmouth 2015-11-27 04:07:27

添加他们俩都适合我。 – choz 2016-09-26 07:43:41

有时你可以有一个样式表打破了appearance: none;所以当发生这种情况的一种方法是使用caret。最好的办法将是重写代码，并找出哪些是你的代码中有陷入困境的风格的一部分none

使用carat之前，你需要知道，它可以给你一些麻烦与其他风格

-webkit-appearance: caret; 
    -moz-appearance: caret; 
    -o-appearance: caret; 
     appearance: caret;

注意：使用none,caret不是最优的。

来源

2015-04-23 21:16:55 TheCrazyProfessor

这里是简单的解决方案

input[type=text] { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
}

来源

2016-07-25 16:40:57 IqbalBary

删除移动Safari（iPhone）上的textarea内部阴影

回答

相关问题