去除文本输入的内阴影

border-style:solid; 将覆盖 inset 样式。这是你问的。

border:none 将一起删除边框。

border-width:1px 会将其设置为类似于背景更改之前的样子。

border:1px solid #cccccc 更具体，适用于宽度、样式和颜色这三个方面。

示例：https://jsbin.com/quleh/2/edit?html,output

---

这是移动 safari 的解决方案：

  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

根据https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

并按照此处的建议：Remove textarea inner shadow on Mobile Safari (iPhone)

---

目前没有任何解决方案有效。这是我的解决方案。您可以添加前缀。

box-shadow: inset 0px 0px 0px 0px red;

---

添加 border: none 或 border: 0 以完全删除边框，或添加 border: 1px solid #ccc 以使边框变细且平坦。

要在 Firefox 中删除幽灵填充，您可以使用 ::-moz-focus-inner：

::-moz-focus-inner {
    border: 0;
    padding: 0;
}

请参阅live demo。

---

设置 border: 1px solid black 使所有边相等并删除任何类型的自定义边框（除了实心）。此外，设置 box-shadow: none 以删除应用到它的任何嵌入阴影。

---

试试这个
outline: none;

现场演示https://codepen.io/wenpingguo/pen/KQgbXq

---

所有浏览器，包括 Safari（+ 移动）：

input[type=text] {   
    /* Remove */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Optional */
    border: solid;
    box-shadow: none;
    /*etc.*/
}

---

我正在研究火狐。我遇到了同样的问题，输入类型的文本是自动定义的，看起来像 boxshadow 插图，但事实并非如此。您要更改的是边框...只需设置 border:0; 即可。

---

这是一个小片段，尝试一下可能很酷：

input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}

请注意：border-style 移除内部阴影。

输入{边框半径：10px；边框颜色：紫罗兰色；边框样式：实心； }

---