删除 HTML 按钮/提交的完整样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2460100/
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 the complete styling of an HTML button/submit
提问by Saif Bechan
Is there a way of completely removing the styling of a button in Internet Explorer? I use a css sprite for my button, and everything looks ok.
有没有办法完全删除 Internet Explorer 中按钮的样式？我为我的按钮使用了 css sprite，一切看起来都不错。
But when I click the button, it moves to the top a little, it makes it look out of shape. Is there a css click state, or mousedown? I don't know what triggers that state.
但是当我点击按钮时，它会向顶部移动一点，使它看起来变形。是否有 css 单击状态或鼠标按下状态？我不知道是什么触发了这种状态。
I know it's not a really big deal, but sometimes it's the small things that matter.
我知道这不是什么大不了的事，但有时它是重要的小事。
采纳答案by a darren
I'm assuming that when you say 'click the button, it moves to the top a little' you're talking about the mouse down click state for the button, and that when you release the mouse click, it returns to its normal state? And that you're disabling the default rendering of the button by using:
我假设当你说“点击按钮，它会移动到顶部一点”你是在谈论按钮的鼠标按下状态，当你释放鼠标点击时，它会恢复到正常状态? 并且您正在使用以下方法禁用按钮的默认呈现：
input, button, submit { border:none; }
If so..
如果是这样的话..
Personally, I've found that you can't actually stop/override/disable this IE native action, which led me to change my markup a little to allow for this movement and not affect the overall look of the button for the various states.
就个人而言，我发现您实际上无法停止/覆盖/禁用此 IE 本机操作，这导致我稍微更改了我的标记以允许此移动并且不影响各种状态的按钮的整体外观。
This is my final mark-up:
这是我的最终标记：
<span class="your-button-class">
<span>
<input type="Submit" value="View Person">
</span>
</span>回答by Kevin Leary
I think this provides a more thorough approach:
我认为这提供了一种更彻底的方法：
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}<button>Example</button>回答by Dan Fabulich
Your question says "Internet Explorer," but for those interested in other browsers, you can now use all: unseton buttons to unstyle them.
您的问题是“Internet Explorer”，但对于那些对其他浏览器感兴趣的人，您现在可以使用all: unseton 按钮来取消它们的样式。
It doesn't work in IE or Edge 18, but it's well-supported everywhere else.
它在 IE 或 Edge 18 中不起作用，但在其他任何地方都得到很好的支持。
https://caniuse.com/#feat=css-all
https://caniuse.com/#feat=css-all
Safari color warning:Setting the text colorof the button after using all: unsetcan fail in Safari 13.1, due to a bug in WebKit. (The bug will be fixed in Safari 13.2 and up.) "all: unsetis setting -webkit-text-fill-colorto black, and that overrides color." If you need to set text colorafter using all: unset, be sure to set both the colorand the -webkit-text-fill-colorto the same color.
Safari 颜色警告：由于WebKit 中的错误，在 Safari 13.1 中color使用后设置按钮的文本all: unset可能会失败。（该错误将在 Safari 13.2 及更高版本中修复。）“设置为黑色，并覆盖颜色。” 如果使用后需要设置文本，请务必将和 设置为相同的颜色。all: unset-webkit-text-fill-colorcolorall: unsetcolor-webkit-text-fill-color
Accessibility warning:For the sake of users who aren't using a mouse pointer, be sure to re-add some :focusstyling, e.g. button:focus { outline: orange auto 5px }for keyboard accessibility.
无障碍警告：对于谁是不使用鼠标的用户着想，一定要重新添加一些:focus样式，例如button:focus { outline: orange auto 5px }为键盘辅助功能。
And don't forget cursor: pointer.all: unsetremoves allstyling, including the cursor: pointer, which makes your mouse cursor look like a pointing hand when you hover over the button. You almost certainly want to bring that back.
并且不要忘记cursor: pointer。all: unset删除所有样式，包括cursor: pointer，当您将鼠标悬停在按钮上时，这会使您的鼠标光标看起来像一只手。你几乎肯定想把它带回来。
button {
all: unset;
color: blue;
-webkit-text-fill-color: blue;
cursor: pointer;
}
button:focus {
outline: orange 5px auto;
}<button>check it out</button>回答by Sarfraz
Try removing the border from your button:
尝试从按钮中删除边框：
input, button, submit
{
border:none;
}
回答by ValRob
In bootstrap 4 is easiest.
You can use the classes:
bg-transparentand border-0
在引导程序 4 中是最简单的。您可以使用以下类：
bg-transparent和border-0
回答by Midhat
I think it's the button "active" state.
我认为这是按钮“活动”状态。
