Html 去除文本输入的内部阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12791631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove inner shadow of text input
提问by FabianCook
So I have a text input, im using html5, on chrome, and I want to change the look of a text input, I've removed the outline on focus (orange on chrome), I set the background to a light color #f1f1f1but now there is like a thicker border on the top and left sides, like it's meant to look pushed in, when there is no change in background color this doesn't happen. How do I remove it? Sorry I can't provide a picture, on a mobile device.
所以我有一个文本输入，我使用 html5，在 chrome 上，我想更改文本输入的外观，我删除了焦点的轮廓（chrome 上的橙色），我将背景设置为浅色，#f1f1f1但现在顶部和左侧有一个更厚的边框，就像它看起来被推入一样，当背景颜色没有变化时，这不会发生。如何删除它？抱歉，我无法在移动设备上提供图片。
It happens on chrome, ie, and Firefox, can't test any others.
它发生在 chrome 上，即，和 Firefox，无法测试任何其他人。
回答by Anthony Hatzopoulos
border-style:solid;will override the insetstyle. Which is what you asked.
border-style:solid;将覆盖inset样式。这是你问的。
border:nonewill remove the border all together.
border:none将一起删除边框。
border-width:1pxwill set it up to be kind of like before the background change.
border-width:1px将其设置为背景更改之前的样子。
border:1px solid #ccccccis more specific and applies all three, width, style and color.
border:1px solid #cccccc更具体，适用所有三个，宽度，样式和颜色。
回答by Owen
This is the solution for mobile safari:
这是移动Safari的解决方案：
-webkit-appearance: none;
-webkit 外观：无；
as suggested here: Remove textarea inner shadow on Mobile Safari (iPhone)
回答by atilkan
None of the solution are working currently. Here is my solution. You can add prefixes.
目前没有任何解决方案有效。这是我的解决方案。您可以添加前缀。
box-shadow: inset 0px 0px 0px 0px red;
回答by Marat Tanalin
Add border: noneor border: 0to remove border at all, or border: 1px solid #cccto make border thin and flat.
添加border: none或border: 0完全删除边框，或border: 1px solid #ccc使边框变薄和平坦。
To remove ghost padding in Firefox, you can use ::-moz-focus-inner:
要在 Firefox 中删除 ghost padding，您可以使用::-moz-focus-inner：
::-moz-focus-inner {
border: 0;
padding: 0;
}
See live demo.
见现场演示。
回答by Erick Petrucelli
Set border: 1px solid blackto make all sides equals and remove any kind of custom border (other than solid).
Also, set box-shadow: noneto remove any inset shadow applied to it.
设置border: 1px solid black为使所有边相等并删除任何类型的自定义边框（实心除外）。此外，设置box-shadow: none为删除应用到它的任何插入阴影。
回答by user1506075
回答by bessa3301
here is a small snippet that might be cool to try out:
这是一个小片段，可以尝试一下：
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
note that: border-styleremoves the inner shadow.
请注意：border-style删除内部阴影。
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}<input type="text"/>回答by vincent thorpe
I'm working on firefox. and I was having the same issue, input type text are auto defined something looks like boxshadow inset, but it's not.
the you want to change is border... just setting border:0;and you're done.
我在火狐上工作。我遇到了同样的问题，输入类型文本是自动定义的，看起来像 boxshadow 插图，但事实并非如此。您要更改的是边框...只需设置即可border:0;完成。
