Question

如何使<button>元素的样式尽可能地与<a>元素相似？

我不需要特定于链接的text-decoration: underline; color: blue;等等 - 我正在重置那些。基本上，我希望<button>在我应用类之前就像纯文本一样。

背景：在JavaScript应用中，我有点击处理程序绑定到<a>个元素。这些<a>元素没有自然的href，这在某些浏览器中会影响键盘的可访问性。似乎用<a>替换<button>会更好地反映元素的意图。但是当我使用<button>时，浏览器会严重影响样式。如何阻止浏览器搞乱样式？

Answer 1

您可以重置button

像这样：

＆＃13;

button, button:active, button:focus{
  border: 0;
  outline: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  background: none
}

＆＃13;

<button>test button as a link</button>

＆＃13;

Answer 2

这适用于删除大部分样式：

button, button:active, button:focus {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

http://jsfiddle.net/gwxo97ag/1/

重置/标准化<button>以像<a></a> </button>一样工作

2 个答案: