删除文本输入的内部阴影

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;

如下所示:删除Mobile Safari(iPhone)上的textarea内部阴影

Answer 3

目前没有解决方案正在运行.这是我的解决方案.您可以添加前缀.

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

Answer 4

添加border: none或border: 0删除边框,或border: 1px solid #ccc使边框变薄和平坦.

要删除Firefox中的ghost填充,您可以使用::-moz-focus-inner:

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

查看现场演示.

Answer 5

设置border: 1px solid black为使所有边等于并删除任何类型的自定义边框(除了实体).此外,设置box-shadow: none为删除应用于它的任何插入阴影.

Answer 6

尝试这个
outline: none;

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