Question

所以我有一个文本输入，我使用html5，在chrome上，我想改变文本输入的外观，我已经删除焦点上的轮廓（橙色在chrome上），我将背景设置为一个灯颜色#f1f1f1但是现在在顶部和左侧有一个更厚的边框，就像它看起来被推入一样，当背景颜色没有变化时，这不会发生。我该如何删除它？抱歉，我无法在移动设备上提供图片。

它发生在chrome上，即Firefox，无法测试任何其他内容。

Answer 1

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

border:none将一起删除边框。

border-width:1px会在背景变化之前将其设置为类似。

border:1px solid #cccccc更具体，适用于所有三种，宽度，样式和颜色。

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

Answer 2

这是移动游猎的解决方案：

-webkit-appearance：none;

如此处所示：Remove textarea inner shadow on Mobile Safari (iPhone)

Answer 3

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

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

Answer 4

添加border: none或border: 0以完全删除边框，或border: 1px solid #ccc以使边框变得薄而扁平。

要删除Firefox中的鬼填充，您可以使用::-moz-focus-inner：

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

请参阅live demo。

Answer 5

设置border: 1px solid black以使所有边都等于并移除任何类型的自定义边框（固体除外）。另外，设置box-shadow: none以删除应用于它的任何插入阴影。

Answer 6

试试这个 fun <- function(v1, v2) { v1[v1 == 1] = v2[1] return(v1) } df <- mapply(fun, df, key) df SNP1 SNP2 SNP3 [1,] 5 2 7 [2,] 2 6 0 [3,] 5 0 7

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

Answer 7

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

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

Answer 8

下面是一个小片段，可以尝试一下：

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

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

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

<input type="text"/>

Answer 9

我正在使用firefox。我有同样的问题，输入类型文本是自动定义的东西看起来像boxshadow插入，但它不是。你要改变的是边界......只需设置border:0;就可以了。

删除文本输入的内部阴影

9 个答案: