CSS & Button：如何覆盖 html 按钮元素的原生 CSS？答案

【问题标题】：CSS & Button: How to override native CSS of html buttons element?CSS & Button：如何覆盖 html 按钮元素的原生 CSS？
【发布时间】：2013-03-28 12:52:27
【问题描述】：

我尝试将我发现的优雅 CSS 样式应用于按钮。出于语义/可访问性的原因，我需要保留按钮。但是我漂亮的 CSS 与按钮元素的原生 CSS 样式相冲突，并且输给了它。

如何覆盖html按钮元素的自然CSS？

/* CSS works for buttonis, doesn't work for buttons*/
button.btn, buttoni.btn {  
   ... 
}

http://jsfiddle.net/bkWNw/3/

编辑：buttons 元素应该看起来与 buttonis 元素完全一样。

【问题讨论】：

根据下面的答案，您的 CSS 没有“冲突”，而是现有按钮样式指定了边框，而您的样式未指定边框，因此现有边框仍然存在。跨度>

标签： css button user-agent

【解决方案1】：

这是一个完整的 CSS 重置：

在 CSS 中

.reset-style {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  }

&lt;button class="reset-style"&gt;This is clickable&lt;/button&gt;

在 JS 中：


export const resetButton = {
    padding: 0,
    border: 'none',
    font: 'inherit',
    color: 'inherit',
    backgroundColor: 'transparent',
    cursor: 'pointer'
}

【讨论】：

【解决方案2】：

在最新的浏览器上，您还可以使用 -webkit-appearance: none -moz-appearance: none 从这些元素中删除默认样式。演示：http://jsfiddle.net/faueK/

【讨论】：

【解决方案3】：

只需设置border: none 即可摆脱该边框。

【讨论】：

【解决方案4】：

要么使用CSS Reset，要么将边框和轮廓设置为none。

border: none;
outline: none;

http://jsfiddle.net/bkWNw/5/

【讨论】：