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

Question

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

但是当我点击按钮时，它会稍微向上移动，这使得它看起来失去了形状。是否有CSS点击状态或鼠标按下状态？我不知道是什么触发了那个状态。

我知道这不是什么大问题，但有时小细节也很重要。

- Saif Bechan

Answer 1

我认为这提供了一种更全面的方法：

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

<button>Example</button>

- Kevinleary.net

---

我认为背景没有“none” - 而且!important也不好。 - sheriffderek

通常在进行这个操作时，您想要覆盖现有的按钮样式。很少会使用不带样式的HTML进行操作，因此需要使用!important。尽管如此，我已将其删除，因为这是一种情况决策。 background: none是完全有效的：https://dev59.com/ZmIi5IYBdhLWcg3w9wQU - Kevinleary.net

每个人对于!important都有自己的看法。我不认为我能够在被强制使用它的项目上工作。关于'none'，这里有一个比SO帖子更好的参考资料。当你仅使用'background'时，你实际上是在使用简写并覆盖了所有属性。 - sheriffderek

为了方便使用，我认为你可能需要保留那个轮廓线。否则，在你切换时没有任何视觉提示，你不知道自己在哪里。回答很好！ - John Hooper

请注意在reset.css中使用type和attribute，因为类型和属性的声明比类的声明具有优先权。特异性是通过所有特异性因素的总和来排名的。 - Webwoman

Answer 2

你的问题提到了“Internet Explorer”，但对于那些对其他浏览器感兴趣的人来说，现在可以使用all: unset来取消按钮的样式。

这在IE中不起作用，但在其他地方得到了很好的支持。

https://caniuse.com/css-all

可访问性警告：为了那些不使用鼠标指针的用户，请确保重新添加一些:focus样式，例如button:focus { outline: orange auto 5px }用于键盘可访问性。如果您感到懒散，可以使用button:focus { outline: revert }来恢复轮廓为浏览器的默认设置。https://caniuse.com/css-revert-value

（而且，我希望这是不言而喻的，但请确保添加回某种样式，以便您的按钮实际上看起来像一个按钮，并最好还有一些:hover样式。如果您的按钮没有边框，请考虑使用cursor: pointer。）

button {
  all: unset;
}

button:focus {
  outline: revert;
}

<button>check it out</button>

- Dan Fabulich

---

谢谢你！ - Will Ediger

出于可访问性原因，这并不可取。例如，您需要为:focus元素状态添加回所有的outline样式。 - Devin

@Devin 很好的观点！我更新了我的帖子，并建议重新添加“outline”样式。（但我认为除此之外，我们没有其他需要为a11y目的重新添加的东西。你知道还有什么吗？） - Dan Fabulich

旧版Safari颜色警告：在使用“all: unset”后设置按钮的文本“color”可能会在Safari 13.1中失败，原因是WebKit中的错误。（该错误已在Safari 14及以上版本中修复。）“'all: unset'将'-webkit-text-fill-color'设置为黑色，并覆盖了颜色。”如果您需要在使用“all: unset”后设置文本“color”，请确保将“color”和“-webkit-text-fill-color”都设置为相同的颜色。 - Dan Fabulich

使用"outline: revert"比手动设置button:focus样式更清晰的解决方案（尽管它在需要支持非常旧的浏览器时无法工作）。 - Alex von Brandenfels

@AlexvonBrandenfels 好主意！我已更新我的回答。 - Dan Fabulich

Answer 3

我假设当你说“点击按钮，它会稍微上移一点”时，你是在谈论按钮的鼠标按下状态，并且当你释放鼠标点击时，它将返回到正常状态？而且你正在使用以下方式禁用按钮的默认渲染：

input, button, submit { border:none; } 

如果是这样的话...

个人经验表明，你实际上无法停止/覆盖/禁用IE的原生动作，这导致我稍微更改了我的标记以允许此移动并不影响按钮的整体外观。

这是我的最终标记：

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

- Darren Shewry

Answer 4

在Bootstrap 4中，最简单的方法是使用以下类：bg-transparent和border-0

- ValRob

---

• 对我来说 shadow-none 就够了。谢谢！

- Bachet

Answer 5

为您的按钮添加简单样式

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

- SouMitya chauhan

---

这是我希望找到的答案，我一直使用（all: unset），但它会移除 Angular 中任何指令的样式。而这个方法只会真正地移除样式。所以我更喜欢这个答案。 - Binary_Hits00

Answer 6

尝试从您的按钮中移除边框：

input, button, submit
{
  border:none;
}

- Sarfraz

Answer 7

我认为这是按钮的“激活”状态。

- Midhat

---

它必须处于活动状态，你是对的加一分。但我没有成功地使它正常工作。 - Saif Bechan

"I think" 不是一个答案。 - shinzou