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

Question

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

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

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

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

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

Answer 1

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

border: none;
outline: none;

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

Answer 2

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

Answer 3

只是设置border: none摆脱那个边界。

Answer 4

这是一个完整的 CSS 重置：

在 CSS 中

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

<button class="reset-style">This is clickable</button>

在 JS 中：

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