删除 HTML 按钮/提交的完整样式

有没有一种方法可以完全去除 Internet Explorer 按钮的样式？我使用了一个 CSS 精灵作为按钮，一切看起来都很正常。

但是当我点击这个按钮时，它会移动到顶部一点，使它看起来变形了。是否有一个 css 点击状态，或鼠标下拉？我不知道是什么触发了这种状态。

我知道这不是什么大事但有时候小事才是最重要的。

433882 次浏览
小开

试着去掉按钮上的边框:

input, button, submit
{
border:none;
}
小开

我想这是按钮“激活”状态。

小开
最佳答案

我假设当你说“ 点击按钮，它移动到顶部一点”的时候，你说的是鼠标向下点击按钮的状态，当你释放鼠标点击的时候，它会回到正常的状态？并且您正在禁用按钮的默认呈现，方法是使用:

input, button, submit { border:none; }

如果是这样. 。

就我个人而言，我发现实际上你不能停止/覆盖/禁用这个 IE 本机操作，这导致我改变了我的标记一点点，以允许这个移动，而不影响按钮的整体外观的各种状态。

这是我最后的加价:

<span class="your-button-class">
<span>
<input type="Submit" value="View Person">
</span>
</span>

小开

我认为这提供了一种更彻底的方法:

button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
<button>Example</button>

小开

在引导程序4中是最简单的。 你可以使用这些类: bg-transparent和 border-0

小开

你的问题说的是“ Internet Explorer”，但是对于那些对其他浏览器感兴趣的人来说，你现在可以在按钮上使用 all: unset来解除它们的样式。

它在 IE 中无法工作，但在其他任何地方都得到了很好的支持。

Https://caniuse.com/#feat=css-all

可访问性警告: 为了不使用鼠标指针的用户，一定要重新添加一些 :focus样式，例如 button:focus { outline: orange auto 5px }用于 键盘可读性。

别忘了 cursor: pointer。all: unset移除了 所有样式，包括 cursor: pointer，当鼠标悬停在按钮上时，它使你的鼠标光标看起来像一只指针。你几乎肯定想把它带回来。

button {
all: unset;
cursor: pointer;
}


button:focus {
outline: orange 5px auto;
}
<button>check it out</button>

小开

为按钮添加简单样式

.btn {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}

提交答案