删除文本输入的内部阴影

77

所以我有一个文本输入，我在chrome上使用html5，我想更改文本输入的外观，我删除了焦点上的轮廓（在chrome上为橙色），将背景设置为浅色，#f1f1f1但是现在在顶部和左侧都有一个较粗的边框，就像是要向内推，如果背景颜色没有变化，则不会发生这种情况。如何删除？抱歉，我无法在移动设备上提供图片。

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

html css input

— 法比安·库克（FabianCook）
source

135

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

border:none 将一起删除边框。

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

border:1px solid #cccccc 更具体，并同时应用宽度，样式和颜色这三种。

示例：https：//jsbin.com/quleh/2/edit？html，输出

— 安东尼·哈佐波洛斯
source

7

第一行border-style: solid是对该问题的最佳答案。

— charleslparker

边框样式：没有答案在寻找

— Satbir Kira

45

这是移动Safari的解决方案：

-webkit-appearance：无；

如此处建议：在Mobile Safari（iPhone）上删除textarea内部阴影

— 欧文
source

— 发挥

27

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

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

— 阿蒂尔坎
source

18

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

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

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

观看现场演示。

— 马拉·塔纳林
source

是的，它没有边框，是的，但是当我将边框设置为1px并将颜色设置为黑色时，只设置了两个侧面。另一个是白色的。

— FabianCook 2012年

11

设置border: 1px solid black为使所有边均等，并删除任何种类的自定义边框（非实线）。另外，设置box-shadow: none为删除应用到它的任何嵌入阴影。

— 埃里克·佩特鲁切利（Erick Petrucelli）
source

如果我将边框设置为其他任何颜色，例如#eee，则仍只设置了两个侧面

— FabianCook 2012年

看我的更新。您可能还需要将边框样式和大小更改为solid和1px。

— 埃里克·佩特鲁切利

谢谢。我是基于你的，所以。

— FabianCook 2012年

1

box-shadow是使该解决方案对我有用的原因，没有其他解决方案可以做到这一点。

— Nate M.

5

试试这个
outline: none;

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

— 用户名
source

0

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

— 文森特·索普
source

0

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

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"/>

展开摘要

— bessa3301
source