关于html:删除文本输入的内部阴影

remove inner shadow of text input

所以我有一个文本输入,我使用HTML5,在Chrome上,我想改变一个文本输入的外观,我去掉了焦点上的轮廓(在Chrome上是橙色的),我把背景设置为浅色#f1f1f1,但是现在在顶部和左侧有一个更厚的边框,就像它的意思是在背景颜色没有变化的情况下看起来是被压进去的一样。这是不可能的。如何删除它?抱歉,我无法在移动设备上提供图片。

它发生在Chrome、IE和Firefox上,无法测试任何其他浏览器。


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

border:none将把边界全部移走。

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

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

示例:https://jsbin.com/quleh/2/edit?HTML,输出


这是Mobile Safari的解决方案:

-WebKit外观:无;

如这里建议的:删除移动Safari(iPhone)上的文本区域内部阴影


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

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


加上border: noneborder: 0完全去掉边界,或加上border: 1px solid #ccc使边界变薄变平。

要在firefox中删除重影填充,可以使用::-moz-focus-inner

1
2
3
4
::-moz-focus-inner {
    border: 0;
    padding: 0;
}

见现场演示。


设置EDOCX1[4]使所有边相等,并删除任何类型的海关边界(实体除外)。另外,设置box-shadow: none以删除应用于它的任何插入阴影。


试试这个埃多克斯1〔12〕

现场演示https://codepen.io/wenningguo/pen/kqgbxq


我正在开发火狐。我也遇到了同样的问题,输入类型文本是自动定义的,看起来像是boxshadow inset,但事实并非如此。您要更改的是边框…只需设置border:0;,就完成了。