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

6 回答

• 8

  通过添加此css样式：

  -webkit-appearance: none;
  

  回复于 2024-04-24T17:47:21+08:00
• 15

  在添加CSS样式的同时

  -webkit-appearance: none;
  

  它会工作，它会摆脱一切 . 您可能想尝试这样做：

  box-shadow: none !important;
  

  这样你就可以保持向下箭头了 .

  回复于 2024-04-24T17:47:21+08:00
• 318

  这是一个简单的解决方案

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

  回复于 2024-04-24T17:47:21+08:00
• -29

  有时你可以在那里打破 appearance: none; 的样式表，以便在发生这种情况时修复它是使用 caret . 最好的方法是重写你的代码并找出你的代码的一部分那些混乱的样式 none

  在使用 caret 之前，您需要知道它可以让您在使用其他样式时遇到麻烦

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

  注意：使用none，插入符号不是最佳选择 .

  回复于 2024-04-24T17:47:21+08:00
• 23

  https://stackoverflow.com/a/51626446/9287284

  background-clip：padding-box;

  我在这里发现了一个较旧的答案评论 .

  https://stackoverflow.com/a/29750016/9287284

  回复于 2024-04-24T17:47:21+08:00
• 0

  设置 input 标签的 background 和 border css属性似乎也有效 .

  试试这个：

  <style>
  input {
      background: #ccc;
      border: none;
  }
  </style>
  
  <form>
  First name: <input type="text"/>
  
  Last name: <input type="text" />
  </form>
  

  回复于 2024-04-24T17:47:21+08:00